From my understanding of Reactive web, when you click on a button that will take you to a new screen. It does not take you to the new screen immediately but renders that new screen while keeping you on the old screen till the new one is ready.
However, sometimes the transition between screens is a bit slow and it seems to the user that nothing is happening... Besides manually adding a flag and loader to the action that calls the new screen, is there some way to attach logic to always show a loader when the transition is taking place behind the scenes so that the user knows the new screen is on its way?
I assume to make this possible we would need an event or variable or something to be able to latch onto, even if it is in the JS of the app itself. Is there some JS to know when it is busy loading the new screen into the DOM or something like that? Perhaps this is more of a React question even than just an OutSystems question.
Hello Nicholas,
As far as I know, the only way to add a loader to a page is by adding the flag and the logic you mentioned yourself, however, you can add this logic to the main layout you are using so that it is present in all the pages of your app.
This way you can have your logic in only 1 place instead of adding it to all the pages manually.
Hope it helps!
Paulo Rosário
Thanks Paulo. Adding it to the main layout is a good idea. Let's see if any more ideas come through also.
Hi, I am creating a function like that on individual screens... May I know how can it be done adding to the main layout?
Hello
When you navigate from one page to another there is a transition in between, and the thing which takes time is the data which is being loaded so to control that you can add a loader with a Is Datafect property of an aggregate , so once your data is being loaded then the loader will be removed and you will be able to view the page, You can check some Forge Component available for the same:
You can also make a Custom loader of your choice, just it on a container by using Css, or you can also add a Loader jif , and bind it with is data fetch property.Hope this helpsThanksTousif Khan
Hi Tousif
The time this question refers to is the transition time, not the DataFetch time.