Así que quiero tener un indicador de carga dentro de mi componente iluminado hasta que se haya cargado. Este es el HTML:
<login-element class=" flex justify-center items-center"> <div class="animate-spin rounded-full h-11 w-11 border-t-2 border-b-2 border-purple-500"></div> </login-element>Aquí está el código mecanografiado:
import {LitElement, html} from 'lit'; import {customElement} from 'lit/decorators.js'; @customElement('login-element') export class LoginElement extends LitElement { override createRenderRoot(){ return this; } override render() { return html`<a href="/auth0" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Sign In</a>` } }Actualmente, agrega el botón de inicio de sesión. Quiero que reemplace el indicador de carga. ¿Hay una forma recomendada de hacerlo?
Puede pasar el HTML para el Spinner y la información, ya sea que algo se esté cargando a través del elemento personalizado.
<login-element loading><b>Spinner-Element</b></login-element>El spinner-HTML en sí lo obtendrá a través de
unsafeHTML(this.innerHTML)dentro de su elemento personalizado.
Luego puede usar su rueda giratoria y decidir mostrarla con un condicional dentro de la función render().
@property({ type: Boolean }) loading = false; render() { return html` ${this.loading ? html` Showing spinner: ${unsafeHTML(this.innerHTML)}`: 'loaded!'} `; }En este ejemplo de trabajo, si elimina el atributo "cargando", verá el mensaje "¡cargado!" mensaje; de lo contrario, verá lo que pasó al elemento como marcado giratorio: https://stackblitz.com/edit/lit-element-typescript-starter-pl3bij?file=my-element.ts