App Preview Skeleton

[Ghrehh]

Description

• Adds a skeleton loader to improve the experience for previewing you apps.

• Differs a little from the designs outlined in the ticket because the original mock-up didn't account for the dev tools bar, cleared the changes with design.

• Also added a cut out effect to the text of the dev tools bar on the skeleton, folks can let me know if they think this is a little too much, it's most obviously visible on the darker themes.

Loading logic

The skeleton is inserted into the document returned from the server so that it appears during the potentially sizeable period between initial document load and when svelte is loaded. The client app then removes the skeleton once it's ready to render content.

The builder design section uses a different document than the production apps and the portal preview section, and it has a unique load handler. For this case, the builder renders the skeleton loader until the client is ready to render.

For the portal app list preview, the builder also displays an unanimated skeleton loader until the client app iframe loads its document. This was because, even on fast connections there was a notable flash when selecting another app from your list before the client document itself was loaded. Once the client app document is loaded, the builder then hides its skeleton and the aforementioned skeleton loader placed on the client app takes over.

I did attempt to use svelte ssr hydration to "take over" the skeleton loader in the client and stop rendering it that way, as that seems a little more "sveltey". But it didn't seem to work, and honestly the documentation is very sparse. I'm guessing unless your rendering exactly the same app tree it doesn't know how to hook the client app logic in properly, having the same top level components doesn't seem to be enough.

Animation

There's a shimmer animation on the skeleton, I used an svg for the "lines" of the skeleton to create a cutout, so that the header and lines share a single background image. This was done so that the "shimmer" effect is continuous for all the elements displayed, instead of each having their own animation that would very in speed based on the size of the element.

Caveats

The loader doesn't take into account if the default page of the app has completely hidden its nav. This is because the value marking navigation as hidden is set per screen, and this would require making a bunch of additional db requests in the document prerender process with is obviously not ideal for something purely cosmetic.

Another option would be to add some sort of memoization endpoint that caches whether the default page of the app has its nav hidden or not. This proved to be really complicated though, as this needs to take into account things like user auth levels, custom user auth levels, whether home pages are selected or not, and then whether these values have been edited or deleted, so I opted to just punt on it.

Misc

Another potentially interesting find is that currently in production, the default selected screen for apps with no home page is different in the builder design section and in the portal/client app proper. Probably not a huge issue, but should maybe be unified in future.

Addresses

• https://linear.app/budibase/issue/BUDI-7679/apps-list-skeleton-loader-for-viewing-app

description	gif
lightest theme
light theme
dark theme
darkest theme
midnight theme
nord theme
no dev tools
vertical nav
design section desktop
design section mobile
published app

Feature branch env

Feature Branch Link

[aptkingston]

Holding off reviewing this until the new changes to move it into the client lib are added 👍

[Ghrehh]

@deanhannigan @aptkingston I've addressed both of your feedback if you could give this another look when you get a chance please. I updated the original PR message with more context and added some comments with context also which maybe helpful.