Speeding up show/hide (see screenshot) 📽

Guys,
How can I ensure some conditional elements don’t show up at all even for a split of a second?

I haven’t experimented much with it, but perhaps you can put the default state to “display: none”. And use the ‘show’ dynamic attribute.

That way it should be hidden until the script finishes loading and possibly show it.

Also you can use the preloader https://docs.wappler.io/t/applying-a-page-preloader/2875

1 Like

display="none" + show condition does not do the trick, still displays for a sec by default somehow, which is not normal :thinking:
Not crazy about the preloader for such a simple show/hide.

Seems like lots of data is loafing on your page or it is loading slowly - maybe you should check this.
Also, you may want to consider using conditional regions, so the hidden elements are not rendered in the DOM.

Good idea, thanks! Lemme try it now…

And maybe check if the data is loading slowly and what is the reason for that.

Indeed, it is a loading issue, the DOM trick did not help…
Do you see what we should focus on?

Did you try using the preloader component? Your interface depend on data that you load using server connect and the preloader component waits until the server connects finished loading the data before it is showing the page. Default App Connect shows the page as soon it finished the initial render on dom ready.

I’ll resort to the prelaoder then as @karh suggested.

For our understanding and learning of how Wappler works, is it better to “merge” as many server actions within an API in order to limit the number of server connect calls, rather than having as many server connect as we have APIs?
Example: if I have a list of cities and a list of currencies. Is it faster if I call both of them within a unique API (and subsequently 1 SC) or if I call them separately (therefore 2 APIs <=> 2 SC)?

Depending on the browser the number of parallel connections is limited to around 6 connections per hostname. That means if you have more then 6 assets that need to be downloaded from your hostname it will block some until the first ones finishes. So limiting the number of requests can speed up your page.

Merging server actions really depends on the usage, in your example with a cities and currencies list it would probably make sense to merge them, you probably only load both of them once at page load at the same time.

1 Like

Does this still apply if your server uses HTTP/2?

It depends on the implementation of HTTP/2. It can improve speed since it can do parallel requests without blocking and has not the overhead per request like with HTTP/1.x. When the server and app are optimized for HTTP/2 then it can improve speed a lot by doing smaller requests in parallel. But enabling HTTP/2 doesn’t automatically improve performance and not all browsers support HTTP/2 and will fall back to HTTP/1.x.

1 Like

Thanks Patrick