Conditional elements show for split second on page load

Front End Components
1

I am building a PWA (PHP/HTML/CSS/JS, not Node) where speed is essential.

In my PWA I have several elements (e.g. pop overs) conditionally showing.

When I load the PWA, all these elements show up for a split second.

This also suggests that these elements are loaded (which has an impact on speed).

What would be the best way to avoid this from happening and ensure that only those who are supposed to be shown are shown?

1 Like
2

I’ve got the same thing going on…

3

You could try:

  1. Using the Beta channel which uses a faster App Connect.
  2. Using show and hide instead.
  3. Show the rendered version after the data has finished loading (pre-loader).
1 Like
4

Wrap the conditional div within a show/hide div. Any data within the condition you can use a flow to wait 200ms, should give the page enough time to load, then run the Action to fetch the data. That way the page loads quicker, the user gets the page, and by the time they want to view the data its loaded, or even have the Action set to no load, and fire the load on an event which triggers the flow to fetch the data, and that way no data is loaded that is not requested by the user.

2 Likes
5

I find that a flashing conditional region is typically caused by the condition relying on a piece of server connect data that is not yet available.

For example, if the condition is

!sc.data.enable

Then it will always evaluate to true until the server connect has run and thus will show the region.

You can add to the expression, requiring that the server connect has actually run by evaluating sc.data

!sc.data.enable && sc.data

Which says, show the conditional region if the server connect has run, and there is not a value for sc.data.enable.

8 Likes
6

Thank you all for the valuable suggestions and ideas, this is very useful information!

1 Like
7

Update: While theoretically all solutions make sense, I’ve tried all options but none work in practice.

It seems that the DMX components (dmxAppConnect I assume) are slower than the DOM loading?

9

Are you using dmx-show or dmx-hide? Hopefully you’re using dmx-show.

dmx-show will hide the element (by adding style="display: none !important; on the element) and only when data is returned that matches your When condition will the element display.

dmx-hide will display the element until data is returned that matches your When condition and only then will it hide the element by adding style="display: none !important;.

3 Likes
10

This happens consistently, and it is indeed due to the condition waiting for server data.

I prefer using condition over show-hide because show-hide the data etc. still loads in the dom but with condition it doesn’t.

However, if I can’t resolve the issue through other means then I typically use a show-hide as well as the condition as per some of the recommendations above.

It’s a bit frustrating but this is the only workaround right now I believe.

1 Like
11

I’m hitting against this now, I’ve tried every option mentioned here and it’s still flashing for an instant before page loads fully (I’m using a preloader too). It’s very annoying, hopefully we can get a better solution to resolve this.