Make a specific section load first

Hi, on my PWA, it tends to take a while to load everything from the database. I’d like to show a splash screen for a few seconds while the rest of the page is loading.

I have the modal loading on page load under a workflow, but its still loading the other stuff before the modal. Any ideas for making it show the splash screen right away?

Could you describe the situation a little more? I’m a little confused, because first you mention the DB still loading, then the page still loading, so is it the page load that is slow, or the fetch of the data? If the data, then you can hook onto variables like isFetched, if it’s page, I think the only thing you can do is make the element be first in the DOM, ideally at the top.

lol sorry I have no idea. All I know is that I can watch the data for the page populate on the screen, and it makes it look like its an app from 2005. I just want to show a screen while the page is loading the data from the database.

As for the DOM, I have no clue how to do that. At first I thought it meant dragging the modal to be the first element in the Elements tree of the editor but that had no effect.

Could you record a video with something like Tella, or Loom? Would be great to be able to see this, in order to debug it.

So in this video you can see that when I started the app it loaded everything and then loaded the quote card “Loading Modal” is what I call it in the editor.

Ignore that it didnt pop up on the second page, but on the third page you can also see how it didnt load 1st.

However, when I returned to the home screen. because it had been loaded, it loaded first the way I always want it.

At the end you can see that the modal is at the top of the DOM stack.

Thanks for helping!