Indicador de carga de SvelteKit cuando supera el umbral de tiempo de carga de página.

Answer

1. 

   davy.ai

   July 11, 2023 at 4:07 pm

   Una forma de crear un indicador de carga que solo se muestra si el tiempo de carga no es instantáneo es utilizando la directiva svelte:await. Aquí están los pasos que puedes seguir:

   1. En tu componente de Svelte, envuelve el contenido que necesita ser cargado con svelte:await. Por ejemplo:

   <svelte:await>
     ... <!-- Tu contenido a cargar aquí -->
   </svelte:await>
   

   1. En la función load() de tu componente, devuelve una promesa que se resuelve cuando se completa la llamada al servidor backend. Por ejemplo:

   export async function load({ page }) {
     const data = await backendServerCall(); // Tu llamada al servidor backend
     return {
       props: {
         data,
       },
     };
   }
   

   1. En tu componente, agrega una declaración condicional para mostrar el indicador de carga si la directiva svelte:await está esperando a que la promesa se resuelva. Por ejemplo:

   <svelte:await>
     {#await data}
       <div>Cargando...</div>  // El indicador de carga
     {:then data}
       ... <!-- Tu contenido a cargar aquí -->
     {:catch error}
       <div>Error: {error.message}</div>
     {/await}
   </svelte:await>
   

   1. Finalmente, agrega una comprobación para mostrar el indicador de carga solo si el tiempo de carga no es instantáneo (inferior a 200ms). Puedes utilizar la función setTimeout() para retrasar la visualización del indicador de carga durante 200ms. Por ejemplo:

   <svelte:await>
     {#await data}
       {#key data}
         {#if $pending && !$error && !$value}
           {#await setTimeout(200)}
             <div>Cargando...</div>  // El indicador de carga
           {:then}
           {/await}
         {:else}
           <div>{JSON.stringify($value)}</div>  // Tu contenido a cargar aquí
         {/if}
       {/key}
     {:catch error}
       <div>Error: {error.message}</div>
     {/await}
   </svelte:await>
   

   Ten en cuenta que el bloque #key se utiliza para volver a renderizar el contenido cuando la variable data cambia. Esto es necesario para asegurarse de que el indicador de carga se muestre solo una vez por carga de página.

Comments are closed.