Conditional rendered divs show momentarily on page load and are then hidden

Ask us anything
1

Hi everyone,

I have created a simple single-page application that has different divs that are conditionally rendered. All is working as expected, but when the page first loads all of the content is momentarily displayed before it is then hidden.

This is the condition attached to the render for one of the divs:

image

And for reference, the default value for fw_Settings.Page-Loading is true. I am also re-setting the variable value on page load to true (as it is saved in local storage so could be false when the page is reloaded) and it is only being set to false after the fw_Settings.Nav-SectionCurrent is being (correctly) set.

Thanks!

2

It’s the variables youre using I think. If theyre not set to false or whatever triggers your conditional render by default, it might flicker because it takes some little time to process the logic. You might want to make it hidden by default and then unveil it upon a condizion. Or create a preloader.

3

Thanks @Broberto.

This is what I thought, but I also thought I have protected against this outcome based on how I have designed the variables/logic. As you can see in the screenshot of the logic in my original post, if the fw_Settings.Page-Loading value is set to true then the section won’t be rendered (regardless of whether the Nav-SectionCurrent value is set to the correct value). The default value for fw_Settings.Page-Loading is true, and I re-set it to true on page load as well just in case the local storage value is no longer true. So what am I missing here?

And in terms of your suggestions, how do I make it hidden by default (beyond what I have already done), and/or create a preloader?

4

have you tried to use an easier formula: not(pageloading) and (nav == 'start') ?

5

Thanks @dorilama, I hadn’t but trying that now hasn’t fixed the issue

6

Hi!
You could try this: don’t use the conditional rendering, but set the “display” option conditionally to “none” or “block”.

7

Thanks @Max. I had thought to try this and may go down that route if I have to but would really like to use conditional rendering to improve initial page load speed. I’m also assuming that I’m not the first person to want to do this…

Will wait for a solution here first but failing that will try display: none and will let you know how I go

8

Probably the pageloading variable is flashing from a falsy value to true. Instead to have a negative value to show the elements, try with a positive one. Something like pageReady.

9

Nice one @dorilama, that was it! Really appreciate your help, and everyone who chipped in so quickly as well

1 Like