When/how to use skeleton loaders

Question

I am on a project where we have different views in terms of medical data (user list, forms, vital signs, documents, graphs etc.). I read about skeletons and when to use them but when in practice, it is a bit different case. Let's say, I have opened a view with a graph. First the view must load and second a graph which is from another provider. In this case, there are 2 loaders, first, there is a loading spinner for the view (window with toolbar etc) and when this loads there is a skeleton loader for the graph itself. Is this a good approach? I understand when we have some sort of list or table, we can use a skeleton loader to progressively load elements so that the user has a feeling of progress. But to have the first spinner and then skeleton seems a bit off yet it is two-step loading from a different provider.

The second thing I can not understand is on what level should we draw skeleton loaders. I read that the skeleton loader must represent data 1:1, but to have a skeleton for every string or element is a bit overwhelming, isn't it? Also, if you don't know how many elements are in a list (if you would know, then the items are already loaded right?) if the system shows skeleton loader with 5 items and then it shows 1 or 50, isn't this a bit confusing or should every single element have skeleton loader? Also is there is an SVG of the skeleton loader, and if there is no sign of progressing loading of elements, isn't it better to use spinner then? I am just a bit confused about how skeleton loaders work (render) and putting them in "real life". A discussion from this community would help

Answer 1

Consider flipping the order - load the view with a skeleton, and then load any lagging components with a spinner over the component. Skeletons can be used for components but they're really useful for views.

You do not need the skeleton to reflect every element on the page. It's meant to provide a general idea of the page structure rather than a lo-fi state of the actual page.

Answer 2

In general, skeletons allow you to show the UI while the backend is being loaded. Spinning loaders are perceived by users to be longer in time compared to skeletons, even if both take the same amount of time to load. They improve user expectations and remove that "ta-da!" moment.

• Skeletons should replace spinners. So, spinner followed by a skeleton is overkill.
• Skeletons don't need to be 1:1, they are a general representation of what users should expect once the content loads.
• For long lists (or not knowing the length), you don't need to list all the items, as a general rule use 3 to 5 skeletons, no more than that.
• If there's no content, try to do a check before you load the skeleton so that you display an empty state instead.