maatma-videos/src/routes/+layout.svelte

<script>
 import { videos } from '$lib/stores/videos.js';

 import "bootstrap-icons/font/bootstrap-icons.css";

 import {
     Container,
     Styles,
 } from '@sveltestrap/sveltestrap';

 import Header from '$lib/components/Header.svelte';

 export let data;
</script>

<svelte:head>
    <title>Maatma Videos</title>
</svelte:head>

<Styles />

<Header />
<Container fluid class="flex-fill d-flex flex-column justify-content-center pb-4 pb-lg-2">
    {#if data.error !== null}
        <Container class="border border-2 border-info text-center py-3 display-6 mb-5">
            Une erreur s'est produite&nbsp;: {data.error}
        </Container>
    {:else if $videos === null}
        <Container class="border border-2 border-info text-center py-3 display-6 mb-5">
            Chargement de la liste des vidéos&hellip;
        </Container>
    {:else}
        <slot></slot>
    {/if}
</Container>