visual-framework
COMPONENT, DOCUMENTATION: loaders
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:
- Documentation on when to use loaders
- Some sort of vf-loader or utility code that can help with skeleton content
- Where will loaders be used?
- Will an improved version of the skeleton loader be better instead of some. spinning loader?
- What do we do when JavaScript fails
I noticed a massive spinning loader on the training home page and I'm unconvinced by it.
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.
@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?
If you'd like some more elaborate ideas: https://frontend.horse/articles/concentric-circle-spinner/
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.
Summary of the discussion above with pointers to the most relevant resources:
-
Relevant readings and summary by Cindy (for documentation): https://github.com/visual-framework/vf-core/issues/1332#issuecomment-858429480
-
Ken's suggestion about variants: https://github.com/visual-framework/vf-core/issues/1332#issuecomment-863059955
-
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
