Displaying placeholder / skeleton screen for a (large) graph

Question

I'm creating a dashboard that retrieves a significant amount of data from an API before displaying some charts and metrics.

I have read that skeleton screens are perceived as being shorter in duration when compared to other options. Thus, I wanted to try it.

It seems that people replace use animated basic shapes to indicate what it will be replaced with. In the case of a large graph, I find myself bothered by a large rectangle covering the entire graph area:

• it does not indicate anything about what's loading in that placeholder (and what's to expect once it's loaded)
• it is arguably ugly

I could also use animated charts instead but that seems to break the idea of a skeleton screen.

Has anyone faced something similar and found something that works in that case?

Answer 1

Your placeholders need to be explicit enough to allow users understanding what they are waiting for during loading time.

Are we waiting for the chart lib to load ? data ? maybe the whole component ?

Axis only

This option is probably the best match with other components placeholder as it imply that only data is loading ans everything else is already setup on your page.

This is the option used by Google Analytics.

---

"Fake" chart

Keep in mind to use lighter colors or grayscale and explicit text to avoid any other interpretation of the dummy data displayed.

---

Iconography

If you're not able to load the chart component with axis or dummy data at this point, why not use a simple but relevant icon ?

Answer 2

These are called lazy load images. It is good practice to show relevant image in each component. If it is image/chart then show chart image (fig1) or if it is going to be a text/paragraph then, show paragraph image (fig2)

Fig1

Fig2

But remember it doesn't matter whether you use animated or non-animated placeholders to the user if the data doesn't load within the attention span of the user.