COMPONENT, DOCUMENTATION: loaders

[khawkins98]

Yesterday on Slack loaders came up.

@nitinja

good morning, do we have any "loader" component? like spinning wheel or something?

@khawkins98

tl;dr: no, not yet. we should make a simple spinner as start. Later we can make more holistic page-skeleton loaders.

---

This is something I’ve wanted to get on Cindy's backlog, once she has a bit of time.

The https://wwwdev.ebi.ac.uk/training-beta/ uses its own custom spinner loader but it’s not optimal.

We’ve also, some time ago, discussed trying to avoid using “page spinners” in favour of content UI ghosting/skeletons. But the only component to support that is the embl breadcrumbs https://github.com/visual-framework/vf-core/blob/develop/components/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.scss#L19

More about that concept at: https://www.smashingmagazine.com/2020/04/skeleton-screens-react/ (edited)

@nitinja

Good info. May be we can add both loader and a skeleton component? Loader will still be useful in some cases for quick mockups or where UX is not essential.

We need:

1. Documentation on when to use loaders
2. Some sort of vf-loader or utility code that can help with skeleton content

[sturobson]

1. Where will loaders be used?
2. Will an improved version of the skeleton loader be better instead of some. spinning loader?
3. What do we do when JavaScript fails

I noticed a massive spinning loader on the training home page and I'm unconvinced by it.

[khawkins98]

Going to add this to the VF-UX consultation.

[nitinja]

Recently designed loader component for Account-manager project

[cindyebi]

Hi guys, I have done some readings on this topic:

https://www.nngroup.com/articles/progress-indicators/
https://www.carbondesignsystem.com/patterns/loading-pattern/

• Spinner animation is recommended for things that are pretty fast to load (2-10 seconds)

• Skeleton loader (as it currently looks like on the covid19data portal) is recommended for data tables and containers

• Progress bar animation is to show a progress indicator for page/content that will load >10 seconds

@nitinja the mockup looks nice, I am going to steal this for the spinner animation variant.

[cindyebi]

@nitinja I made a mockup from your spinner loader animation above, though we need to adjust the colors a bit because the greys weren't visual framework. I added new color details:

@khawkins98 could we formally add this component into VF or do we want to discuss it further in the clinic?

[khawkins98]

If you'd like some more elaborate ideas: https://frontend.horse/articles/concentric-circle-spinner/

[khawkins98]

Just as a status update @nitinja mentioned he'll have a look at implementing this.

We'll probably make a vf-indicator-loader component with a few variants:

• vf-indicator-loader--spinner
• vf-indicator-loader--skeleton (placeholder to come later)
• vf-indicator-loader--progress (placeholder to come later)

We'll also need someone to take the lead on writing usage documentation.

[nikiforosk]

Summary of the discussion above with pointers to the most relevant resources:

• Relevant readings and summary by Cindy (for documentation): COMPONENT, DOCUMENTATION: loaders #1332 (comment)

• Ken's suggestion about variants: COMPONENT, DOCUMENTATION: loaders #1332 (comment)

• Skeleton: https://www.smashingmagazine.com/2020/04/skeleton-screens-react/

Examples by @sandykadam:

• Progress: https://getbootstrap.com/docs/5.3/components/progress/
• Spinners: https://getbootstrap.com/docs/5.3/components/spinners/

Accessibility of animations:

• https://www.universaldesign.ie/technology-ict/web-and-mobile-app-accessibility/web-accessibility-techniques/developer-s-introduction-and-index/design-basics-1-non-technical-/dev-1-5-avoid-using-flashing-flicker-and-unnecessary-animation.html

• https://css-tricks.com/accessible-web-animation-the-wcag-on-animation-explained/

• https://www.a11yproject.com/posts/design-accessible-animation/

Status:

• Progress bar implemented as vf-progress-indicator component
• Spinner: Alpha in Figma and some initial implementation
• Skeleton: Haven't started working on this yet