search

uiowa / brand-icon-browser

0 stars 1 forks source link

Skeleton loading approach. #14

Closed GaryRidgway closed 2 years ago

GaryRidgway commented 2 years ago

First page load is jittery, should we be offering grey boxes on load like youtube, facebook, or storybook?

GaryRidgway commented 2 years ago

This might be a useful resource https://learnvue.co/2020/04/vue-skeleton-loading-screen-using-suspense-components-daily-vue-4/#how-is-our-skeleton-loading-screen-going-to-work

quamsta commented 2 years ago

Yes, possibly. haven't had time to dive into/look at this method, but here's my favorite skeleton GIF:

quamsta commented 2 years ago

@GaryRidgway, I've played around with this a bit, but the issue we're facing here is that the icons are not loaded asynchronously from an API like the example you linked. The icons (and theeir data like their labels) are currently bundled within the brand-icon-browser app.

I'm trying to reduce some initial page jitter and things usingprerender-spa-plugin in this branch: https://github.com/uiowa/brand-icon-browser/tree/feature_prerender_spa, which prerenders the "heavy" initial view that contains all 500+ icons.

However we may need to revisit how these icons are retrieved and presented in order to provide a way to lazily load or fetch them when a user switches between categories and the "All Icons" view aka the HomeView. Both the categories with a lot of icons and the home view seem to cause the most jitter, likely due to the large size of the DOM.

When you switch between categories with fewer icons in them, the jitter seems a lot less noticeable.

Another option may be that we render the first 30 or so icons and load more as you scroll. This would reduce a lot of the jitter seen with the larger categories/home view.