Skeleton loading

[terezanovotna]

This is an enhancement for an existing pattern.

Pattenfly Spinner could be substituted with skeleton loading which looks much cleaner on the screen. Or skeleton loading could be introduced as a new pattern to pick from when any information is being loaded.

The idea originated in theforeman/foreman#6103 (comment)

[mcarrano]

Can you say more about this @terezanovotna ? Not sure exactly what the request is. Is it to incrementally load form data as it becomes available vs. waiting for all the data? Or is it a different kind of spinner element?

[terezanovotna]

It is a suggestion/idea on using different visual to load data instead of a spinner. There is no high priority on this, but as the devs suggested it, I thought it could be a good idea to implement it in the future.

[katierik]

Following up on this, I have a proposed design for how to use skeleton loaders & spinners together. This is going to be used in a product currently in development. One of the devs on the project (Ryan L) has been working on a "smart skeleton" which could be appropriate

Google share: https://docs.google.com/presentation/d/1kfKbl5HtumYiNm-ubJxxP93EqJjfThijEd6n1QIhD60/edit?usp=sharing
PDF copy of slides - message me

CC @mcarrano @rachael-phillips

[mcarrano]

Fantastic work @katierik . I'd love to get this on the PF4 roadmap somewhere. @rachael-phillips what do you think?

[rachael-phillips]

Yes, absolutely. Skeleton loading is currently in our backlog, but if we decide this is something that we will work on the next few months we should definitely consider the skeleton loading designs that @katierik has put together! Spinner has been under design and development with PF4 over the past couple of days, so that component will be coming soon.

[ninavizz]

Hi @katierik! I tried opening/viewing your skeleton pattern, and got an "Access Denied" message. Is that intentional?

Looking forward to seeing a good Skeleton pattern added to Patternfly! I just discovered Patternfly, and am so delighted to see Redhat making this contribution to design. 😄

[andybraren]

+1’ing this potential new component. OpenShift has been working on some new dashboard designs, and we’d use this new pattern extensively while data is being loaded. Here’s a mockup of one card’s loading state:

@matthewcarleton put together this HTML/CSS example, and the Insights Storybook seems to have an even more refined React implementation that would be perfect for us too. I imagine the circular variant in the image above (for an undetermined status icon) could probably be done with a CSS class modifier on the same component.

[rachael-phillips]

@mcarrano should this be moved to the patternfly-next repo or it is ok for it to stay here for now?

[mcarrano]

@rachael-phillips Yes, this should be moved to the -next repo so we can track it.

[mcarrano]

@LHinson per our discussion, we should get this on the roadmap.

[doruskova]

@mcarrano I'm adding a link to my exploration about skeleton loading - Skeleton Marvel It does include the guideline about

• what's skeleton, when to use skeleton and when not
• how to use it and when to use both (skeleton and spinner together)
• how the skeleton may look like (a card, table) >> this depends on a shape of data

[doruskova]

@mcarrano I'm adding a design for a slow wave motion from the left to the right
Codepen preview

[mcarrano]

This looks good @doruskova . @mceledonia can you also take a look?

[mceledonia]

@mcarrano @doruskova Looks good to me as well!

[mcarrano]

@mcoker , can you take a look at the CodePen above and let us know if you see any technical issues with implementing the animation effect? If we are good to go with this, I will open a core issue. Looks like this is scheduled for milestone 2020.09.

[mcoker]

@mcarrano looks great to me!

[doruskova]

@mcarrano Design guideline specification is available here

[mcarrano]

Thanks @doruskova . This looks great! I have opened core issue: patternfly/patternfly#3105 to track implementation and also patternfly/patternfly-org#1842 to add design guidelines.

[doruskova]

@gdoyle1 @mceledonia Is this issue on hold?

[gdoyle1]

Not that I know of @doruskova ! @mceledonia can you still take this on?

[doruskova]

Skeleton symbols merged!

[doruskova]

Template merged!