I’m building an single-page application. I have a main container that contains “pages”, and when the user ‘goes’ from one page to another, I hide the current page and show the target page.
Until the target page is displayed, I want to show a “loader” element (spinning wheel).
Since my workflow to hide current page and show target page relies on changing the value of a “page” variable, it seems that the loader, which itself has its own boolean variable for display, is pretty much instantly set to “true” and back to “false”. In other words it doesn’t have time to become visible.
Is there a way to check if the target page element is fully rendered before changing the loader element’s variable?
EDIT: I’ve added a 1000ms “Time delay” event in the workflow A) after the loader is shown, and B) before the loader is hidden again, but I’m still wondering if there’s a better way to do this.
Hi unlustucru,
how do you hide the loader after xxx seconds? I can’t find a workflow action “hide”.
(I also want to display a loader on my “homepage” and hide it after some seconds.
There’s not an action to “hide”—instead you’ll want to create a boolean variable, eg show_content that is bound to the content that you want to show/hide.
You can then bind this variable to sections/containers/divs. For example, I would have a div for the loading state—conditional rendering = !show_content— and a div for the loaded state—conditional rendering = show_content. This controls the toggling between the two states. Then somewhere I have a workflow where first action is to set show_content to false…run some additional actions and/or insert a time delay…then end the workflow with setting show_content back to true.
** I also use this at a more granular level for widgets which are bound to collections and instead of using manual variables I use the collections .isFetched property to toggle states.
In my project, I have an image on my home-page that is visible at start.
I want it to disappear (hide) it after some seconds.
Your solution with the toggle should work, but I can’t figure out how to set a workflow that starts at page-load (so without interaction of a user).
I believe there are two ways to initiate a workflow that starts at page-load:
There is app level workflows, which if I understand them correctly are applied to ALL pages. In theory this might be used for authentication, but I don’t use these as I have some public pages and some private pages. You can find this under the More menu in the Dashboard’s global navigation
Then there are page level workflows, which can be can be found under your page settings—navigate to a page and click the arrow/chevron to the right. You’ll find “Trigger page workflows” here.
Depending on your setup, you’ll create your workflow in either one of those two locations, eg On Page Load (before Fetching) > show page loader > fetch collections > hide page loaded > show page content. In case you are wondering, App Load happens (at least from my understanding) the first time the session is instantiated, which included when you refresh the browser and is primarily where I fetch the user profile, otherwise I use Page Load to fetch the page’s collections and content; that is to say, I imagine Page Load will best suit your situation.
