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