How can I show a "Loading" spinner while I'm performing some calculations?
Question
Application Type
Reactive

Hi there.

I have a block, which receives two lists as input parameters and then performs a bunch of calculations using those lists, and then displays the results. It does take a little while to make these calculations (which I distributed into 5 different client actions aprox.), so I would like to show the user a loading screen while those calculations are being performed.

This is what I tried: Having a "Loading" boolean variable, which would have a default value of True, and be assigned a value of false after all the client actions have been performed. If that "Loading" variable is True, a loading text is supposed to be shown, otherwise, the actual info of the block is displayed.

However, the loading text is NEVER being shown, it starts off by showing all the elements of the block that should be shown only after every calculation has been performed. And obviously, you can see a bunch of zeros everywhere until the client actions finish being performed and the info is updated. And that's what I want to avoid.

I am executing these client actions inside of the On Ready event of the block. Maybe that has something to do?

I would highly appreciate some help with this :)

I think you understand the main logic to make it happen, so maybe what you are facing is a more specific error, possibly related to the calculations you are making, watch out for the "default" values of your calculation (e.g. make sure that Loading = True when GetMyEntity.IsDataFetched = False for all your relevant screen aggregates). Anyway, just in case you need it, here is a full walkthrough of a way to do it:

You can make an icon spin by adding the "spinner" style class, and handle the logic with an If widget to determine whether the spinning wheel should be shown.

For example, you can create a reusable block with the following structure: 




Afterwards, place the block in your screen and use the placeholder for the content that will be shown once the loading is finished:


So the widget will react according to the variable's value:

If you don't want to use a block, you can do the same by manually adding the If widget to the screen and following the same logic.

I am attaching an OML example for reference.

LoadingSpinner.oml

mvp_badge
MVP

Hello Yizuhi,

Hope you're doing well.


As per your description I don't see anything wrong. Did you try to debug it just to see that your Loading variable has the correct values?

If possible, can you share your OML so we can take a look?


Kind regards,

Rui Barradas

Is the Loading variable set to default: true in the parent or the block's input parameter?

I think you understand the main logic to make it happen, so maybe what you are facing is a more specific error, possibly related to the calculations you are making, watch out for the "default" values of your calculation (e.g. make sure that Loading = True when GetMyEntity.IsDataFetched = False for all your relevant screen aggregates). Anyway, just in case you need it, here is a full walkthrough of a way to do it:

You can make an icon spin by adding the "spinner" style class, and handle the logic with an If widget to determine whether the spinning wheel should be shown.

For example, you can create a reusable block with the following structure: 




Afterwards, place the block in your screen and use the placeholder for the content that will be shown once the loading is finished:


So the widget will react according to the variable's value:

If you don't want to use a block, you can do the same by manually adding the If widget to the screen and following the same logic.

I am attaching an OML example for reference.

LoadingSpinner.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.