how to implement the loading symbol action

how to implement the loading symbol action

  

Hi 


I need to implement a loading symbol while is fetching data from the database - it has hundreds of thousands of records to be loaded - and I need to set a way to inform the user that processing/fetching data is happening.  How can I create a loading and / or waiting widget that will be displaying on the screen while the user waits and fading when the data is ready to be viewed by the user? I am not using the mobile version. Thanks.

Hi Jorge,

You can accomplish that with just some css and css animations. Here's a pretty basic one.

A quick google search with 'css loader' will show you tons of different and simple ideas on how to make your own.

You can then just enclose it in an 'If', and have it when you click the button to fetch the data, refresh the 'If' to show your loader

ok. but how to "tell" to stop the loader when the fetching from the preparation is done? I want the action itself doing this task. 


If you are refering to preparation fetching then it's a bit trickier, since the page hasn't load yet.

Have a look at José's answer on this topic, where you would first show the spinner and when the data is loaded then refresh the if and show the 'actual page'

yes, the table records is being fetched from the database server, and it has literally hundreds of thousands records. so I need to show a loading action to inform the user that the info is being fetch from the database. When it renders the info in the table records, the waiting icon should disappear... 

Solution

Hi Jorge, did some testing and was able to make it work like this:

The preparation is actually empty, the data is fetched on the GetDataNow action.
The BooleanVar (default value True) is bounded to the If, so when the page loads it will show the top part, the spinner. 

I also added a button at the end of the page with the class "HiddenButtonClass" and gave it the css propert "display:none" so it doesn't show.

Then added this to the page's Javascript property

$(document).ready(function(){
    $(".HiddenButtonClass").click();
});

 So when the page is loaded , it clicks the hidden button that fetches the data.
This is the GetDataNow action flow

Hope this helps.

Cheers

Solution