Les skeleton loaders sont une partie essentielle des Webapps et des sites web.
Ils indiquent à l'utilisateur que le contenu qu'il souhaite accéder est en train de se charger, que quelque chose se passe, et qu'il ne doit pas quitter votre site.
Si votre site met du temps à charger, ou que vous devez afficher des données volumineuses nécessitant un long temps de chargement, les skeleton loaders sont alors indispensables.
Ils peuvent vraiment être ce qu'il faut pour retenir vos visiteurs jusqu'à ce que vos données soient affichées.
Qu'est-ce que les Skeleton Loaders ?
En résumé, les skeleton loaders sont des composants UI qui servent de substitut, ou d'aperçu, du contenu qui sera affiché une fois la page entièrement chargée.
Contrairement aux indicateurs traditionnels comme les spinners ou les barres de progression, les skeleton loaders reproduisent la mise en page réelle du contenu à venir sous une forme simple et légère.
Ils prennent généralement la forme de wireframes ou de boîtes grises représentant des images, des lignes de texte ou d'autres éléments UI.
Cette méthode offre aux utilisateurs une idée claire de ce à quoi s'attendre, réduisant la confusion et la sensation de temps de chargement prolongé.
En regardant l'interface skeleton de Youtube ci-dessus, vous constaterez qu'elle imite la grille de vidéos de Youtube. Cela donne à l'utilisateur une vue claire de ce à quoi s'attendre, tout en lui indiquant que la page est en train de charger et qu'il ne doit pas partir.
Une fois la page complètement chargée, le skeleton loader disparaît pour laisser place au contenu réel du site.
Pourquoi utiliser des skeleton loaders dans vos applications Bubble
Si vous avez utilisé Bubble ne serait-ce que 10 minutes, vous savez sans doute sa principale faiblesse : le temps de chargement des pages.
Les applications Bubble reposent sur un contenu dynamique assez lourd, ce qui prend du temps à charger.
Et vous connaissez probablement cette statistique : 54% des visiteurs quittent un site qui met plus de 3 secondes à charger (source : Google).
Voilà pourquoi il est crucial de trouver des moyens pour retenir vos visiteurs sur une page à long temps de chargement !
Et l'une des solutions (parmi d'autres) consiste à utiliser des Skeleton Loaders.
Comment ajouter des skeleton loaders dans Bubble ?
Maintenant que nous avons présenté les skeleton loaders, passons à la pratique.
Il existe plusieurs méthodes pour ajouter des skeleton loaders dans Bubble, mais pour cet article, j'ai sélectionné la meilleure méthode à mon avis.
L'objectif est d'avoir quelque chose qui fonctionne, avec un rendu professionnel et qui n'alourdit pas trop vos pages !
La meilleure méthode que j'ai trouvée pour ajouter des skeleton loaders dans Bubble est d'utiliser des SVG (Scalable Vector Graphics).
En bref, ce sont des images vectorielles évolutives que nous allons insérer dans un élément HTML et afficher lorsque le contenu est en cours de chargement.
Création de vos loaders SVG
Pour les créer, je vous recommande ce site : Skeleton React
Il vous permet de créer des Skeleton Loaders animés personnalisés très rapidement.
Le point fort de cet éditeur est que vous pouvez soit créer votre propre skeleton loader en glissant-déposant des formes, soit sélectionner un skeleton préfabriqué parmi la communauté :
Ajout de vos loaders dans votre application Bubble
Une fois que vous avez créé ou trouvé les loaders qu'il vous faut, dirigez-vous vers le bas du code.
Vous verrez beaucoup de code un peu intimidant, mais ne vous inquiétez pas, vous n'avez pas besoin de l'étudier en détail !
Descendez jusqu'en bas du code, puis sélectionnez SVG si ce n'est pas déjà fait :
Cela nous donne accès au code SVG, que nous allons utiliser pour intégrer nos loaders dans Bubble.
Une fois votre loader créé, cliquez sur SVG puis Copy to Clipboard.
Ensuite, ouvrez votre application Bubble et ajoutez un élément HTML à votre application.
Placez-le à l'endroit où vous souhaitez faire apparaître le skeleton loader et ajustez sa taille.
Utilisons un exemple.
Supposons que vous vouliez créer un skeleton pour ces cartes produits.
Pour les imiter, il faudra ajouter une rangée de 4 skeleton loaders et les faire apparaître lorsque le Repeating Group est en chargement.
Voici ce que cela donne :
Il faut maintenant cacher les loaders par défaut et les faire apparaître lorsque le Repeating Group sous-jacent est en chargement.
Pour cela, décochez « This element is visible on page load » sur l'élément contenant les éléments HTML, et cochez « Collapse when hidden ».
Ensuite, ajoutez une Condition sur ce même conteneur pour rendre l'élément visible quand le Repeating Group est en chargement :
Maintenant, en Preview, vos loaders devraient apparaître puis disparaître dès que le Repeating Group a chargé ses éléments !
Voici le résultat obtenu :
On peut voir les skeletons apparaître et disparaître simultanément avec l'apparition des Produits, accompagnés d'une belle animation qui leur donne un rendu agréable.
Conclusion
Et voilà !
Vous savez maintenant comment créer des effets skeleton agréables et personnalisables qui apporteront une belle touche à vos applications.
Utilisez-les à bon escient, car ils peuvent vraiment aider à retenir vos visiteurs, surtout si vous devez charger des données lourdes.
