0
385
ViewsStencilJS: How to prevent "flickering" when loading component in a page
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.
1 answers
Answer question0
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.
Crude example of rendering a select element empty until data is set on the component via a property (code not validated):
private _selectionItems = [];
@Prop() selectionItems: string = ''; // csv list of select options
@Watch('selectionItems')
setSelectionItems(selectionItems: string) {
selectionItems = selectionsItems || ''; // null check
this._selectionItems = selectionItems.split(',');
}
render() {
return (
<label for="my-select">Choose an item:</label>
<select id="my-select">
{this._selectionItems.map(
item: string => <option value={item}>{item}</option>
)}
</select>
);
}
Contrast with not rendering at all until data is set (showing render function only):
render() {
if (this._selectionItems.length > 0) {
return (
<label for="my-select">Choose an item:</label>
<select id="my-select">
{this._selectionItems.map(
item: string => <option value={item}>{item}</option>
)}
</select>
);
}
else {
return null;
}
}