Skeleton charts & empty states

[pcoccoli]

I am submitting a...

• Feature request
• Design defect
• Source code defect
• Demo/documentation defect
• Other

charts version:

0.16.24

Issue description

My project requires UI "skeletons" while data is loading.

[theiliad]

There have been explorations on empty states and skeletons.

Nothing that's been approved so far, I will bring up with design, thanks 🙂

[theiliad]

Minor explorations by Shixie

[gvnmagni]

Hello! We are working on the empty states for the different typologies of charts. Attached you can find a preview (sorry for the quite long image), we'd love to get a feedback on a detail.

As you can see for each chart we made two option and the difference is just in the color, second option include a light red for chart structure/grid.

This two states could become one, or they could be 2 option for 2 specific cases:

• Grey option / When data is loading
• Red option / When data are not available or there are issues

Using a light red could be interesting to point out errors or issues, what do you think @theiliad?

[theiliad]

LGTM @gvnmagni. I like the red versions as well although I don't see a necessity for that, the lack of a chart being rendered should be alarming enough to the user/developer.

[gvnmagni]

Thanks Iliad, @mjabbink any preference on this? We are totally ok with both options, just wanted to understand if we like the idea of using a bit of red to give a little alarm when there are issues or if we prefer to just use the grey which might be more neutral

[mjabbink]

agree no red as I think that over emphasizes the issue. Belt and suspenders.

[stegue88]

Hi all, please find attached the Sketch file with the design specs.
Let me know if you prefer to receive directly svgs or something else instead.
200306_skeleton_emptystates.zip

[theiliad]

Hi all, please find attached the Sketch file with the design specs.
Let me know if you prefer to receive directly svgs or something else instead.
200306_skeleton_emptystates.zip

LGTM 💯

[ilariaventurini]

Hello everyone! We did two simple tests with missing data (ie data = { datasets: [], labels: [] }) for scatterplot and stackedbar.

Attached you can find two gifs that show the animation between missing data and correct data (the idea is simulate the data loading).

Do you think they can be fine?

[theiliad]

Do you think they can be fine?

looks great to me 💯

[theiliad]

One comment I have is that if the legend disappears then the chart should probably take the rest of the height of the container (I believe if legend renders nothing then the layout component would automatically do that)

[gvnmagni]

Russ, this image includes all the empty states from the design side. Development is almost done (we are evaluating what to do with skeleton, if it's worth to put some effort on it, but this is now a different issue)

[anne-stevens]

Here are some examples of empty state placeholders, loader states (the shimmer) and entry animation patterns from Cognos Analytics. (Note that the first couple of example take a long time to load b/c they are from a slow test environment.)

Cognos - empty state and shimmer 1.mov.zip
Cognos - empty state and shimmer 2b.mov.zip
Cognos - entry animation 3.mov.zip
Cognos - empty state and entry animation 4.mov.zip

[theiliad]

Here are some examples of empty state placeholders, loader states (the shimmer) and entry animation patterns from Cognos Analytics. (Note that the first couple of example take a long time to load b/c they are from a slow test environment.)

Cognos - empty state and shimmer 1.mov.zip
Cognos - empty state and shimmer 2b.mov.zip
Cognos - entry animation 3.mov.zip
Cognos - empty state and entry animation 4.mov.zip

@anne-stevens have you done user testing for any of these skeleton components?

They seem highly inconsistent with the real chart that's rendered afterwards.

Overall I think it's a bit loud on the screen

[caesarsol]

Just created #568 to track the error states. They are considered external to this task.