Skeleton screen component/option?

Hi guys,

Is there a component/option for showing skeleton screens while data is loading?

There’s lazy loading for images and dynamic data

1 Like

Useful indeed but not exactly the same.

Lazy loading is focused on loading when necessary and not before while a skeleton screen focuses on providing the user a little nudge so the stay on the website and not bounce off.

Actually both can work at the same time. You can have skeleton screens lazy loading while the data comes from the server.

This is what I am looking for.

image

It’s normally used with cards and tables. But can be applied to any element. Given that Wappler builds the elements it would be cool if you could tick an option on the element and Wappler builds a skeleton for the contents of the element.

2 Likes

Yes, I thought that may have been the case. I don’t think that there is a component built in, although you could easily use a jQuery script for that. There’s jquery.skeleton.loader which looks simple enough to integrate although some basic code changing required.

1 Like

There is the preloader feature. Probably not exactly what you are looking for though.

1 Like

Interesting idea. Have seen it indeed in many modern apps - facebook amd linkedin does this too.
It creates a good illusion of loading, specially when it takes longer to get the data.

You do have to known the layout and number of items up front to achieve this result.

Currently this can be easily achieved in Wappler two ways:

  • give have all images a default gray image that you want to see first, later on when the other image is dynamically loaded it will be auto replaced.
  • load with dummy data initially - using gray placeholder images.

To achieve also a gray text, block effect effect maybe more css styling is needed.

Personally I find having also gray blocks as text placeholders very annoying, but it is up to you.

2 Likes

I will play around these ideas. Thanks!

I think they use a default number of skeleton items independently of the amount of data items being requested.