Applying a Page Preloader

[George]

You can add a preloader to your page while the page content is still loading. It can be used on both static sites and sites using dynamic data.

For example it is really useful for large data sets:

In App Structure add new component:

Open Animation:

And select Preloader:

Customize the background color and the preloader color according to your needs:

Set the preloader size (in pixels):

And select the preloader type:

Check the Preview checkbox in order to preview how the preloader looks. Do not forget to turn it off on your live site:

[Freddy_Blockchain]

Just used the preloader , Folding Cube Animation! Just looks and works like a charm! Thanx so much !!!

This small thing prevents from stupid customers, doubleclicking or pressing stuff too quickly without waiting page to be loaded… this would result in alot of problems. Thanx god to this small but helpful :

Animated Be patient dear customer - thing!

[mgaussie]

Hey George, when using a preloader on a page with server actions - it makes it impossible to see dynamic data from within the UI of Wappler, I have to turn the dynamic data off to then see the page past the preloader. Any tips here?

[GlobaticoLabs]

From a UX perspective it’s some kind of bad practice especially when you have dynamic data.
The good / modern UX practice would be to load the static elements and use Skeletons or a mix of Skeletons and loaders only for dynamic data area while loading.

it’s a topic already discussed but maybe should be a very good idea to include this as a wappler features as proposed in this post : Skeleton screen component/option?