0
380
ViewsStencilJS: cómo evitar el "parpadeo" al cargar un componente en una página
Un grupo de voluntarios ha creado un componente de selección única/múltiple utilizando StencilJS: https://github.com/NothingAG/adg-components
Ahora queremos entregárselo al cliente para que lo utilice en su proyecto. Pero notamos que la carga del componente parece tomar algún tiempo después de que se carga la página, por lo que aparece un parpadeo (cuando el componente cargado reclama su espacio horizontal):
¿Es este el comportamiento normal de dicho componente? ¿O cómo podemos asignar el espacio necesario cuando el navegador está renderizando? Podríamos intentar simplemente usar min-height o algo con un valor fijo, pero esto se siente como un truco y puede cambiar con el tiempo.
Muchas gracias por la ayuda.
1 answers
Answer question0
Esto es normal. Un componente web de Stencil pasará por su ciclo de vida de carga de forma asíncrona después de cargarse en DOM y, por lo tanto, es posible que no se complete hasta que DOM haya terminado de cargarse y la página se haya renderizado. Si el componente tiene que hacer una llamada para obtener datos, por ejemplo, antes de que se represente por completo, podría llevar suficiente tiempo para que se note este "parpadeo".
Las estrategias para lidiar con este tipo de situación dependerán del componente, pero en su caso, parece que un enfoque sería representar las etiquetas y los controles sin elementos de selección y tal vez deshabilitados para que el procesamiento inicial pueda ocurrir antes y activar un componente. actualizar a través de una variable de estado cuando los datos obtenidos estén disponibles, lo que simplemente completa los controles de selección y posiblemente los habilite.
Entonces, y estoy haciendo conjeturas sobre cómo funciona su componente, en lugar de renderizar condicionalmente los controles, complete condicionalmente los controles.
Ejemplo crudo de renderizar un elemento de selección vacío hasta que los datos se establezcan en el componente a través de una propiedad (código no validado):
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> ); }Contraste con no renderizar en absoluto hasta que se establezcan los datos (mostrar solo la función de renderizado):
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; } }