StencilJS: How to prevent "flickering" when loading component in a page

Question

A group of volunteers has created a single/multi-select component using StencilJS: https://github.com/NothingAG/adg-components

Now we want to hand it over to the client so they can use it in their project. But we notice that loading the component seems to take some time after the page itself loaded, so some flickering appears (when the loaded component claims its horizontal space):

Is this normal behaviour of such a component? Or how can we allocate the needed space when the browser is rendering? We could try to simply use min-height or something with a fixed value, but this feels like a hack and may change over time.

Thanks a lot for help.

Answer 1

This is normal. A Stencil web component will go through its load lifecycle asynchronously after being loaded into DOM, and therefore it may not complete until after the DOM has completed loading and the page is rendered. If the component has to make a call to fetch data for example before it fully renders, that might take long enough for this "flicker" to be noticeable.

Strategies for dealing with this type of situation will depend on the component, but in your case it looks like one approach would be to render the labels and controls without selection items and maybe disabled so that the initial render can occur early, and trigger a component update via a State variable when fetched data becomes available which simply populates the selection controls, and possibly enables them.

So - and I'm making guesses about how your component works - rather than conditionally render the controls, conditionally populate the controls.