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.
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.
3 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.
Hi @JonL,
did you manage to find a solution for this?
I didn’t go through with it at the end. I’ve seen several libraries that could make a nice app connect extension but as I haven’t had the need since I haven’t explored them.
1 Like
Placeholders are now available in Wappler 4.5.3
3 Likes
This topic was automatically closed after 47 hours. New replies are no longer allowed.