1

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

2 Answers 2

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.

2
  • For the second thing, I would agree, good idea. As for the rest, if I get it right the skeleton can be a bit abstract to the point that users can predict what will be loaded. But, isn't this a bit off? I mean we use skeletons to provide progression, and for that, you have to have a lo-fi state so that elements can load. If you just have an "idea" of the page and then no progression and data just loads it is the exact same thing as a spinner, or am I getting it wrong? Mar 3 at 19:25
  • The skeleton tells the user what basic content areas to expect, but it doesn't need to match the finer details. See this example - LinkedIn doesn't load every picture and long form post, just a hint at the content blocks. blog.angulartraining.com/…
    – Izquierdo
    Mar 3 at 19:37
0

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.
1
  • "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." As I read, in general, skeleton loaders should be placed where content can load gradually. Meaning that items can be shown when they load so that the user has a feeling of progress. If skeleton shows 5 elements and then it loads 20 elements, this is the same as using loading spinner because as ALL items are loaded, skeleton (whole) is removed and replaced with content. Same works with loading spinner Mar 14 at 7:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.