Loading

Trois types de chargements sont réunis dans un même composant Loading :

<Loading process/>

Message

Submessage

play_circle_outline Run Process 3 seconds

Lorsqu’une fonction asynchrone est exécutée, on souhaite limiter les intéractions de l’utilisateur.

Le composant <Loading process/> est placé une seule fois à la racine du projet dans +layout.svelte.

/src/routes/+layout.svelte

<script>
    let { children } = $props()
    import { Loading } from 'gros/loading'
</script>

{@render children}
<Loading process/>

Déclenchement

Pour déclencher le chargement, on utilise les fonctions start et stop du magasin loading à l’intéreur d’un processus asynchrone.

En paramètre de la fonction start, on peut préciser un message et un sous-message (optionnels).

<script>
    import { loading } from 'gros/loading'

    const handleClick = async () =>  {
        loading.start('Loading data', 'It may take a few seconds')

        await stuff()

        loading.stop()
    }
</script>

<button onclick={handleClick}>CLICK ME</button>

<Loading bootstrap/>

Le type bootstrap est dédié au chargement initial de l’application.

Le composant se superpose entièrement à la fenêtre courante et masque l’arrière plan.

play_circle_outline Run Bootstrap 3 seconds

Le paramètre bootstrap est précisé.

<script>
    import { Loading } from 'gros/loading'

    const bootstrap = async () => {  /*load application data*/ }
</script>


{#await bootstrap()}
    <Loading bootstrap/>
{:then}
    <!-- stuff -->
{/await}

<Loading/>

Le composant de chargement est contenu par l’élément parent.

<script>
    import { Loading } from 'gros/loading'

    const myAsyncFunction = async () => { /*do asynchronous shit*/ }
</script>


{#await myAsyncFunction()}
    <Loading/>
{:then}
    <!-- stuff -->
{/await}