Squelette de chargement

Ce composant affiche un faux contenu animé pour ne pas garder une zone vide pendant qu'un vrai contenu plus lent se charge

Utilisation

Appeler la fonction useSkeletonPlaceholder(element, options) avec, en paramètre, l'élément qui va recevoir le squelette, et un objet dont les champs sont les suivants :

L'appel à useSkeletonPlaceholder(element, options) renvoie une fonction qui, quand elle est appelée, stoppe le fonctionnement animé du squelette.

Cette fonction prend un booléen en paramètre qui, à true, indique que le contenu de l'élément englobant (element) doit être vidé.

Mode d'affichage

Par défaut, le choix des motifs affichés est aléatoire. Il peut être défini sur séquentiel, ainsi le moteur d'affichage choisira les motifs décrits dans le tableau de motifs patterns un par un et recommencera au début du tableau si nécessaire.

• SKELETON_PLACEHOLDERS_MODE.RANDOM : sélection aléatoire de motifs
• SKELETON_PLACEHOLDERS_MODE.SEQUENTIAL : sélection séquentielle de motifs

Liste des motifs

Le paramètre patterns de la fonction useSkeletonPlaceholder() est un tableau dont la valeur par défaut inclut toute la liste ci-dessous. Les éléments affichés sont choisis au hasard et l'affichage est rafraîchi selon le délai défini dans le paramètre refreshRate.

Les motifs qui peuvent être affichés dans un squelette sont, par défaut, les suivants :

• SKELETON_PLACEHOLDERS_PATTERNS.CARD : Carte de contenu (image + titre + description + boutons)
• SKELETON_PLACEHOLDERS_PATTERNS.MEDIA : Média vertical (image + icône + titre)
• SKELETON_PLACEHOLDERS_PATTERNS.LIST : Liste (3 items, titre + description)
• SKELETON_PLACEHOLDERS_PATTERNS.TABLE : Tableau (3 colonnes × 4 lignes)
• SKELETON_PLACEHOLDERS_PATTERNS.AVATAR_LEFT : Avatar aligné à gauche (photo + titre + description)
• SKELETON_PLACEHOLDERS_PATTERNS.AVATAR_RIGHT : Avatar aligné à droite (photo + titre + description)
• SKELETON_PLACEHOLDERS_PATTERNS.PROFILE_LEFT : Carte de profil alignée à gauche (photo + titre + description + boutons)
• SKELETON_PLACEHOLDERS_PATTERNS.PROFILE_RIGHT : Carte de profil alignée à droite (photo + titre + description + boutons)
• SKELETON_PLACEHOLDERS_PATTERNS.IMAGE : Photo seule
• SKELETON_PLACEHOLDERS_PATTERNS.TEXT : Paragraphe de texte
• SKELETON_PLACEHOLDERS_PATTERNS.GRID : Grille de contenu (6 items, image + titre)

Il est possible de créer vos propres motifs en respectant les règles suivantes :

Un motif est un objet qui contient 2 paramètres :

• className : le nom de la classe à utiliser (skeleton-placeholder--...)
• childrenCount : le nombre d'éléments (<div>) à afficher dans le motif. Ces éléments permettent de représenter diverses choses : photos, texte, etc.

Charge, ensuite, au CSS du projet d'appliquer les styles adéquats pour formater l'affichage de la carte.

Utilisation sans JS

Il est possible d'utiliser le squelette sans passer par le script. Pour cela, il suffit d'utiliser un flux HTML semblable à celui-ci :

<div class="skeleton-placeholder skeleton-placeholder--card" style="--index: 0">
    <div class="skeleton-placeholder__item skeleton-placeholder__item--0"></div>
    <div class="skeleton-placeholder__item skeleton-placeholder__item--1"></div>
    <div class="skeleton-placeholder__item skeleton-placeholder__item--2"></div>
    <div class="skeleton-placeholder__item skeleton-placeholder__item--3"></div>
    ...
</div>
<div class="skeleton-placeholder skeleton-placeholder--media" style="--index: 1">
    <div class="skeleton-placeholder__item skeleton-placeholder__item--0"></div>
    <div class="skeleton-placeholder__item skeleton-placeholder__item--1"></div>
    ...
</div>
<div class="skeleton-placeholder skeleton-placeholder--text" style="--index: 2">
    <div class="skeleton-placeholder__item skeleton-placeholder__item--0"></div>
    <div class="skeleton-placeholder__item skeleton-placeholder__item--1"></div>
    ...
</div>
...

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>

<%@ page import="fr.kosmos.web.kore.attributes.interfaces.OptionItem" %>
<%@ page import="java.util.List" %>
<%@ page import="fr.kosmos.web.kore.attributes.DefaultOptionItem" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<h2>Chargement de données qui prend plusieurs secondes…</h2>

<%
    final List<OptionItem> optionsItems = List.of(
            new DefaultOptionItem("", "Aléatoire"),
            new DefaultOptionItem("CARD", "Carte"),
            new DefaultOptionItem("LIST", "Liste"),
            new DefaultOptionItem("TABLE", "Table"),
            new DefaultOptionItem("AVATAR_LEFT", "Avatar à gauche"),
            new DefaultOptionItem("AVATAR_RIGHT", "Avatar à droite"),
            new DefaultOptionItem("PROFILE_LEFT", "Profil à Gauche"),
            new DefaultOptionItem("PROFILE_RIGHT", "Profil à droite"),
            new DefaultOptionItem("IMAGE", "Image"),
            new DefaultOptionItem("TEXT", "Texte"),
            new DefaultOptionItem("GRID", "Grid")
    );
    request.setAttribute("optionsItems", optionsItems);
%>

<div>
    <kuik:form-field-select id="skeleton-pattern" items="${optionsItems}" size="md" label="Choissisez un pattern" />
</div>

<div id="loader-container"></div>

<style>
    /* Pour la démo uniquement */
    #loader-container.u-skeleton-placeholder-loading {
        block-size: 800px;
        overflow: hidden;
    }
</style>

<script type="module">
    import { SKELETON_PLACEHOLDERS_PATTERNS, useSkeletonPlaceholder } from '/static/js/skeleton-placeholder.js';

    function showDemo() {
        const selected = document.getElementById('skeleton-pattern').value;
        let patterns;
        if (selected) {
            patterns = [SKELETON_PLACEHOLDERS_PATTERNS[selected]];
        } else {
            patterns = SKELETON_PLACEHOLDERS_PATTERNS;
        }
        const container = document.getElementById('loader-container');
        const stop = useSkeletonPlaceholder(container, {patterns});

        setTimeout(() => {
            stop(true);
            const finishedText = document.createElement('p');
            finishedText.innerText = 'Terminé !';
            const restartButton = document.createElement('button');
            restartButton.innerText = 'Revoir';
            restartButton.addEventListener('click', showDemo);
            container.appendChild(finishedText);
            container.appendChild(restartButton);
        }, 5_000);
    }

    showDemo();
</script>