Limit the preloader to container

How can i show the preloader only inside specific element? i don’t want to lock the whole page.

Find preloder gif or etc…
Select specific element
And click show ( app connetc show / hide events)
Then select serverconnect “executing”

maybe i didn’t understand you but it seems you are explaining how to show the preloader but not limit it to a table or form element for example.

No you can limit …

Select elements and look element properties . You will see show/hide function …

The pre-loaders in Wappler only work at the page level. You can download a Pre-loader gif and use that to display the gif while your serverconnect is executiong.

Above is one place I get pre-loaders from. There are several free resources for pre-loader animations.

it will be much easier if it was integrated in the preloader propertys as a place to show the loader.
its more than just a gif image display :sweat_smile:

1 Like

1 Like

@s.alpaslan Hey thanks for the help but i think you misunderstand the question :sweat_smile:
i want to show the preloader on a table (only the table) so i can click anywhere i want in the page outside the table while the loader is still loading.

The preloader cannot be applied to a certain container.
The reasons are - how do you know what space/height will your dynamic data table cover before the data is loaded? This will cause huge issues with containers jumping and pushing other content around…

@Teodor its ok there is an alternative options :sweat_smile:

For anyone who want that functionality use this JQuery plugin instead of the wappler preloader
https://gasparesganga.com/labs/jquery-loading-overlay

1- load the JS from CDN

2- to show the loader in any static event type this:
$("#yourID").LoadingOverlay("show");

3- to hide it in any static event type this:
$("#yourID").LoadingOverlay(“hide”);

Love how easy it was to include an outside library in wappler with zero issues!!

You can do this without using a plugin :slight_smile:
The question remains the same - how do you know what the element height will be after the data is loaded so you prevent the ugly element jumping?

you can use css to control the size for example or to hide overflow in y or x

just to understand you. you are showing the full page to hide the elements on the page repositioning?

The issue is not with the overflow.

How do you know what height is your dynamic container going to be after all the data (text+images) are loaded? Or do you want to use fixed height for it?

its mostly fixed. in forms for example you will have the same height most of the time and on tables with images you will have a thumbnail for the image with fixed height and width.

Well then you can create your own preloader for the specific elements.
Insert an element with a loading animation/text in the table/form and using the dynamic attributes make it show while the server action is loading.

1 Like