Content appearing before preloader loads

Wappler General How To
#1

I have a page that uses URL params to look up in the database and return data to use on the page which is used in a repeat.

When the page first loads you can see the header, static body content, and footer. Once the data loads in it fills in page but that then shoves some of the static content and footer off screen.

That makes the page look bad as objects just pop in and move stuff around.

I looked into using bootstrap placeholders, but they are kind of finicky and don’t work great because they all need to be the same size but the content it is placeholding for can be different sizes based on the amount of text. Also had some issues where padding/margin on the placeholder stays after the conditional region is hidden.

I tried the pre-loader, and it worked fine on local but when I tried it on a live site it would show the page for a split second then show the pre loader and then the page again.

Also tried setting min heights to the containers that the data fills in, but it’s hard to get it right and the min heights would need to be different for desktop and mobile.

Is there any way to not show the page until the data is fetched?

Can I do anything with server-side rendering? I found this post and it is looking to do the same as me

“I want the project the work like a regular static (but DB-driven) Website - not an interactive, dynamic app.” Full Server Side Rendering in nodeJS

Or is it possible to do something like render a static version of the site? The data isn’t updated very often.

If anyone has any ideas on how to improve this, it would be appreciated.

#2

Do you have any URLs for this page or some screenshots of whats happening? It sounds to me like an issue with responsiveness of the page. Which version of bootstrap are you using?

#3

I’ll send you a message with the link. And I am using Bootstrap 5 local.

1 Like
#4

Use the preloader component to stop this happening as the page loads behind it. Let me know when is live on the link you sent and I’ll take another look:

image

#5

I had previously tried using that, but it didn’t work right, you could see the screen for a bit before the pre-loader showed up.

I’ll give it another try.

Is it better to add it to the page or the layout?

#6

Adding to the layout is better, I’m not sure if ordering is an issue but make sure its right after the body tag / App root:

image

image
image780×108 5.38 KB

#7

When I preview it on localhost it looks good, but when I upload it, it seems to just go transparent for a little bit.

Could you take a quick look at the site again and see if it does the same for you?

edit - I just tried moving the script src for the pre-loader right below the app connect script and now rather than be transparent it shows the site for a split second and then shows the pre-loader.

#8

Looks like you have no preloader spinner set up, try the following settings to test it, re-upload, then I’ll take another look:
image

#9

Just changed it. I can still see the site before the pre-loader pops up.

#10

Yes, I can confrim I’m seeing the same as you.

Try taking the preloader off the main layout and applying it to the page only. Id also recommend manually restarting the NodeJs service on the remote server instead of relying on Wappler to do it.

#11

Moved it to the page and rebooted the whole server, still seeing the same thing.

#12

I’m seeing what you are seeing, try this next: try setting a dynamic attribute for the preloader to show when the content is loading from your layout apge, like this:

image

image

#13

When I just click on loading under view it puts it in as just loading

I manually typed content.loading like so

437×588

uploaded it and the pre-loader doesn’t show at all.

Going back and clicking the lightning bolt made it auto change to just loading.

and that also makes the pre-loader not show at all.

#14

Can you click the Dynamic Attributes picker (lightning bolt) and screenshot your data bindings screen please?

#15

1049×1143

#16

These two should be the same, the one on the left should be: content.loading

When selecting it, go to ‘code view’ and manually enter: content.loading

6vq92b2
6vq92b21049×1143 36.7 KB

#17

I did manually type it, it defaults to loading when I click it but the value in the dynamic attribute is the manually typed in content.loading.

#18

That shouldn’t happen, what version of Wappler are you running, also your NodeJS version?

#19

I am on the most recent version of Wappler and I’m not sure where to check the node version.

#20

Here is a quick gif of what happens

625×843