When a page has dynamic data, it often happens that when the page loads for a short period of time, elements without dynamic data appear. From an aesthetic point of view, it looks terrible. In an attempt to solve the problem, I put a preloader on the pages, but even it doesn’t help. The data templates still “shoot through” when the page loads. It looks like this:
I note that I do not remember this when developing in PHP, but I often encounter it on NodeJS. Does anyone face this kind of thing? Is there a way around this?
Are you using handlebars notation or dmx attributes to render text?
Asking this because the problem most probably is that html is rendered before app connect is loaded and is able to parse handlebars expressions. If you use dmx attributes you won’t face this issue.
I had both direct inserts of dynamic data into the text <h3 class= "mb-1" >{{fio.substring(0, 1). uppercase ()}}</h3>, and using dmx-text. As John suggested above, I converted all dynamic data inserts to the dmx-text format. But it didn’t help. The result is the same. Now I will try the option with the body.
Yes you shouldn’t use inline text bindings like {{ xxx }} but as dynamic attributes like dmx-text for text only content or dmx-html for content with html.
Furthermore the loading sequence is important, if it takes a while to download your data you should use the server connect loading state to show a loading animation.
And if there is a lot to load, better use the full page preloader component.
The page has a preloader installed. All dynamic data is implemented via dmx-text. Plus, I hid all the content with a dmx-show. And still, when you go to the page, there is a seconds display of content that should not be there:
Hello, Patrick. Thanks for the help. Yes, each page uses a personal layout.
I think I managed to find some pattern. So, I observe this behavior everywhere where there are elements with dmx-show parameters. Pages that don’t have elements with dmx-show work fine. I also found that if an element with the dmx-show parameter is wrapped in a div Conditional Region (I use the browser1.document.visibility condition), the page starts loading normally and the elements are no longer displayed ahead of time.
I note that Matthias had a similar problem:
I don’t know if he solved it in some other way or not. But I can say that the preloader does not help in this case. Elements with the dmx-show parameter will still rendering faster than anything on the page for a second, bypassing the preloader stub as well.
Do you use the loading state of the view to display the preloader? I’ve updated the code a bit to set the loading state to false a bit later so that content can render first. Not sure if that will help in your case.
I checked the updated file. Unfortunately, it doesn’t change anything.
I didn’t use the state to display the preloader, just set it on the page, so I decided to test this approach. As far as I understand, you are talking about the condition: dmx-on: load="preloader1.show()"
If I understand you correctly, then unfortunately this does not help either. Elements with the dmx-show parameters are still rendered a second faster than anything on the page.
So far, only the wrapper in the form of Conditional Region fixes the situation stably. And I can tell when the pages load without these visual artifacts, it looks just amazing.
It also looks in the short movie you posted that it happens just before the loading, I don’t see anything strange after the load. It all seems to happen directly when you click for navigation and just before the preloader is being shown,
That’s right. This problem only occurs at the very beginning of the download. Once the page is loaded, there are no problems. I also note that the problem does not occur, if you refresh the loaded page, it will be rendered correctly. But if you go to a page from another page by clicking on a link or open the page in the browser using the page address, then when loading starts, there will be problems with rendering elements with dmx-show, as I indicated above.
Is this design based upon a theme with an included JavaScript file? ie, the theme has functionality included within it that relies upon its own included JavaScript file?
We have found in the past some themes can cause issues as often the scripts don’t work well with one thing or another… Maybe you could try removing said script from the page, if it exists, and try without it, just to discount it causing problems, again, if such a file exists… It could, for example, have its own preload event which interfers, etc…
Too much RedBull for me this morning! So ignore this if it is not relevant.
Although the theme that I use is created with 0 in the Wappler. I have connected a small library for customizing the scroll bar:
I completely forgot about it, because it was never a problem. But it does create its own design from additional flex blocks, and apparently because of this, the above problems arise when the page is first loaded. Removing the library from the page really solves the problem.
Well. Now it remains to understand how to customize the scrollbar, without harming the rendering.
Man we have had issues where we have been through everything banging our heads off the wall only to realise its not us going mad. Once was related to caching and cookies and turned out to be some obscure setting for debugging in a .js file disabling the functions within Wappler. Can waste so much time figuring these things out. Glad I could help.
