Rendering of components should not show styling updates at page-load #67
Replies: 1 comment 1 reply
-
|
So not really. It is possible, by using the (support is currently Chromium only) https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/blocking Because bootstrap is all CSS classes, the The other possible answer is adding SSR support to the library (I'm currently working on wrapping this up) TLDR: without render blocking the loading of elements or display delays, there's no great way to show components in their final state prior to the user seeing it. |
Beta Was this translation helpful? Give feedback.
-
|
With
.. should have the
Because I did try this, and as far as I can tell, then there is no difference in loading/experience. |
Beta Was this translation helpful? Give feedback.
-
When loading a page, then I find it quite problematic that the WA components are being updated from the initial page-load until DOM is fully ready. UI is flicking in this case, and having many WA components on a page is then a horrible user experience.
I have looked into the documentation, "Getting Started > Usage > Waiting for Components to Load" and tried the solutions in there, but either this is too complex (JS solution to know all WA components used) or it does not fully solve the problem with UI (e.g. a display-delay).
The problem is of course most noticable when cache is cleared, but this is of course also to be expected happens in real-life, so I always test with worst-case.
Can't this work like Bootstrap, where there is no component rendering glitch + there are no "special tricks" in this?
My code for this:
At initial page-load then the WA button component is displayed like this at web page:
A second later the DOM is ready and the component is then updated to this:
Maybe/probably I am doing something wrong here, but how to have the user experience as good for WA components as e.g. Bootstrap?
Beta Was this translation helpful? Give feedback.
All reactions