Curseur de chargement horizontal

J’ai vu d’autres sites web conserver la page actuelle entièrement visible pendant que l’autre page se charge et que la barre de chargement défile à l’écran. Peut-être que cette version vaut le coup d’être essayée.

Je voudrais ajouter une chose. Je pense avoir remarqué une autre différence majeure entre Discourse et certains autres sites web qui utilisent un indicateur de chargement. Les trois sites avec lesquels je compare sont https://www.youtube.com, https://github.com et https://bookmeter.com. Voici les différences clés :

1. Comme mentionné dans mon message précédent, plutôt que de remplacer le contenu par une page vide, ces sites conservent l’ancien contenu à l’écran (sans fondu ni autre effet) jusqu’à ce que le nouveau contenu soit chargé.
2. Généralement, beaucoup plus de contenu reste à l’écran même après le chargement de la nouvelle page. Ces sites affichent beaucoup plus de contenu dans le menu supérieur, et disposent parfois même d’un menu secondaire en haut qui peut rester affiché selon le lien cliqué. Ils ont également des menus latéraux qui restent parfois après la navigation vers une nouvelle page. En revanche, Discourse possède un menu supérieur très simple, où seul l’icône de recherche, l’icône du menu hamburger et l’icône utilisateur restent toujours visibles.

Peut-être que modifier le comportement pour conserver l’ancien contenu jusqu’à ce que le nouveau soit prêt fonctionnerait bien. Mais il est aussi possible que cela ne fonctionne pas simplement parce qu’une grande partie du contenu est remplacée, peu importe l’endroit où vous naviguez dans Discourse.

Dans mon cas, j’utilise des bannières de catégorie, des bannières d’étiquettes et une barre latérale affichant les catégories sur les listes de sujets. Discourse propose par défaut certaines routes qui conservent les barres supérieures ou latérales, comme les profils d’utilisateurs ou les groupes. Je préfère grandement conserver l’ancienne vue avant la transition afin que ces éléments à l’écran ne disparaissent pas pour réapparaître au même endroit.

Oui, c’est ainsi que nous utilisons le nouveau composant de thème de glissière (slider) de Discourse depuis environ une semaine, et nous l’apprécions beaucoup. Nous avons simplement désactivé le code de transition du corps de la page et n’utilisons que la glissière.

Le comportement naturel du navigateur lors du chargement (ou du rechargement) d’une page gère la transition ; ainsi, aucun code supplémentaire pour le fondu ou l’effacement d’éléments HTML n’est nécessaire. Cette glissière est excellente sans aucun code de transition de page supplémentaire (fondu, effacement, etc.) et c’est ainsi que nous l’utilisons sur notre site depuis une semaine.

Merci pour cette excellente glissière et pour la possibilité de la personnaliser en tant que composant de thème !

Peut-être avez-vous mal compris ce que j’ai écrit, mais ce que j’ai décrit ne correspond pas au fonctionnement actuel de Discourse avec le composant de thème. Actuellement, Discourse affiche une page vide pour la majeure partie du contenu pendant le chargement du nouveau contenu. Les autres sites web que j’ai liés gardent le contenu actuel pendant le chargement du nouveau contenu. Ce n’est pas la même chose.

Je suis tout à fait sûr d’avoir exactement compris ce que vous avez mentionné @seanblue (ci-dessus). C’est assez simple ce que vous avez dit, et votre post était facile à comprendre, à mon avis.

Si vous commentez la transition du corps SCSS (l’animation) dans le composant de thème du curseur original de Discourse (FWIW, j’ai modifié le composant de thème en le forking il y a une semaine, mais il existe d’autres façons de modifier un composant de thème).

Alors, le comportement est exactement comme vous le décrivez.

La page actuelle (dans notre mod) est affichée pendant que le nouveau contenu se charge (ce qui est simplement le comportement normal d’une page qui se charge sans aucune animation de corps ajoutée. Le « fondu » et le « blanc » que vous voyez dans les expériences actuelles de Discourse étaient dus au code d’animation du corps CSS dans la version du thème (voir ci-dessous) lorsqu’il a été publié il y a une semaine.

Sans l’animation du corps CSS, le curseur de chargement suit son cours normal et il n’y a pas de « blanc » ou de « fondu » du corps, car cette animation était spécifiée dans le CSS du composant de thème (original). La plupart des sites web (comme vous le mentionnez) n’ajoutent pas d’animation supplémentaire au corps, et c’est pourquoi vous avez dit :

C’est « la norme »… ce qui se produit après que l’animation du corps a été supprimée du CSS (je parle de la publication il y a une semaine, car je n’ai pas suivi, c’est-à-dire que GitHub dit, notre version modifiée est :

Après avoir fait ce changement, il y a une semaine, le curseur a l’air super (comme le disent nos utilisateurs) et ne nécessite aucune animation de corps supplémentaire (fondu entrant ou sortant, animations de blanc, etc.).

Ci-dessous se trouvait le CSS que nous avons commenté dans la « version initiale » de ce cool curseur. Cela a si bien fonctionné pour nous (et nos utilisateurs l’adorent), donc nous n’avons pas suivi tous les changements de code expérimentaux « spinners combinés, blanc », animation du corps subséquents à le faire fonctionner joliment pour nous ; sauf les résultats que je vois avec les expériences sur meta).

// body #main-outlet {
//   transition: opacity 0.2s ease;
// }

// body.loading #main-outlet {
//   opacity: 0.2;
//   transition: opacity var(--loading-duration) ease;
// }

J’espère que cela aide.

Ah, je ne réalisais pas que vous utilisiez une version modifiée ou dérivée. C’est de ma faute. Je suis ravi que cette version fonctionne bien pour vous. J’espère qu’ils essaieront cette approche ici sur Meta la prochaine fois.

@david / @awesomerobot Je sais que nous avons beaucoup discuté de ce sujet à plusieurs reprises, mais je pense que nous devrions essayer la mise en œuvre originale (avec quelques améliorations mineures) avant de procéder à un fondu. Laissez-moi résumer les options que nous avons lors d’un clic :

1. Garder l’ancien contenu à l’écran et basculer vers le nouveau contenu une fois qu’il est prêt.

2. Afficher un « écran blanc » et basculer vers le nouveau contenu une fois qu’il est prêt.

3. Transitionner vers un contenu opaque (entre 0 % et disons 40 %) et basculer vers le nouveau contenu une fois qu’il est prêt.

Avec toutes ces options, nous sommes également sûrs de vouloir ajouter : « Si le contenu met plus de 2 secondes, afficher un indicateur de chargement (spinner) ».

(1) est la seule solution qui minimise les états de transition. Oui, il y a un petit temps d’adaptation : « Hé, j’ai cliqué sur quelque chose et rien ne semble s’être produit ». Mais c’est ainsi que fonctionne le web de toute façon lorsque vous cliquez sur un lien hypertexte. Le navigateur n’affiche pas d’écran blanc ni ne fait pas de fondu lors du clic sur un lien vers un autre site.

(2) C’est ce que nous avons actuellement, et cela est considéré comme trop brutal par certains, car l’un des principaux avantages de ce modèle est que nous évitons les écrans blancs. Ce n’est qu’un changement très mineur par rapport à l’ancien indicateur de chargement.

(3) Peut être très distrayant ; trouver la bonne opacité est difficile. D’après mon expérience, lorsque je l’ai essayé, cela devenait extrêmement fatigant après une heure d’utilisation.

@david, nous avons vraiment testé l’option (2). Pourrions-nous maintenant essayer sérieusement l’option (1) pendant une semaine ? Je pense que c’est probablement la meilleure solution car elle minimise les changements à l’écran.

Ce n’est… pas vrai. Une animation de chargement démarre immédiatement au clic. Regardez l’onglet de votre navigateur lorsque vous cliquez sur un lien. Notez qu’au clic ou au tapotement, il passe immédiatement de l’icône de favori à la roue de chargement.

Désolé, oui, c’était bien mon propos : nous pouvons simuler ici quelque chose de très proche de la navigation « standard » (nous pouvons par exemple changer l’icône de l’onglet pendant le chargement, modifier le texte de l’onglet).

Lorsque vous cliquez sur un lien arbitraire sur un site, la page actuelle ne devient pas entièrement blanche, ni opaque. L’ancien contenu reste affiché pendant un certain temps, le temps que le DNS résolve le nouveau site et que le contenu soit prêt à être rendu.

Pour moi, le grand avantage de ce composant réside dans la réduction des états intermédiaires. Si nous pouvons donner l’impression d’une navigation navigateur standard en la simulant, ce serait idéal.

Pas de souci. Nous aimons vraiment le curseur (avec quelques pixels ajoutés pour le bureau), mais nous avons constaté qu’aucune animation du corps de page (blanc, fondu d’entrée/sortie ou autre) n’était nécessaire.

Le curseur indique le chargement de manière tout à fait satisfaisante ; et la page se charge et change naturellement, sans avoir besoin d’ajouter de CSS de transition au corps de page ou de spinners supplémentaires. Nous l’utilisons ainsi depuis 8 ou 9 jours maintenant, les utilisateurs sont satisfaits, et moi aussi. Les utilisateurs n’aimaient pas les animations de « fondu d’entrée/sortie », ni celles de « masquage de la page », ni même l’animation combinée « spinner supplémentaire + curseur ». Mais après tout, nos utilisateurs ne sont généralement pas friands d’animations inutiles ni de gadgets web supplémentaires.

J’espère que l’équipe Meta conservera ce code en tant que composant de thème, ou du moins permettra aux propriétaires de sites de continuer à remplacer ce qu’ils décideront de mettre en place, car il semble que ce que nos utilisateurs aiment et ce que d’autres aiment, en matière de transitions de page, soit différent.

En cas de doute, « être doux et donner aux sites la possibilité de choisir » me semble être une bonne approche.

Ça me va, j’ai restauré le composant dans son implémentation d’origine.

Je pense que le « oh non, 2 secondes se sont écoulées, affichez un indicateur de chargement » est définitivement un détail mineur mais important à ajouter.

À part cela, voyons ce que les gens en disent ; je pense que c’est probablement la version que nous publierons.

Où doit-il s’afficher ? Sous la forme d’une fenêtre modale ? Ou #main-outlet doit-il être masqué après 2 s pour laisser place à un indicateur de chargement ?

Je pense qu’on devrait masquer la prise principale. On pourrait peut-être ajuster le seuil : 2 est un peu arbitraire, peut-être 3, 4 ou 5 ?

L’indicateur de chargement s’affichera désormais après 2 secondes :

C’est plutôt bien ! Sans la couche de spinner supplémentaire après 2 secondes, les choses deviendraient étranges pour les utilisateurs. De cette façon, nous avons le meilleur des deux mondes : 1. Faire semblant d’être ultra-rapide grâce au curseur (nous trichons un peu ici, TBO). 2. Combler le vide si le chargement reste bloqué (transition psychologique).

Bien joué !

Je viens de l’essayer sur un réseau simulé lent, et le spinner après 2 secondes me semble vraiment bien. Je tiens à réitérer que sur ordinateur (sur un écran assez grand en tout cas), la barre de chargement est pratiquement invisible. Je pense qu’ajouter 2 à 3 pixels de hauteur ferait une grande différence.

Je suis un nouvel utilisateur de Discourse et j’ai suivi cette conversation. Je dois dire que je suis très impressionné par la réflexion et le travail acharné consacrés à cette fonctionnalité d’UX si « moderne ». Désolé de m’éloigner du sujet… mais c’est une discussion très impressionnante pour quelqu’un qui utilise d’autres logiciels de forum depuis des années.

Continuez ce excellent travail… j’adore cette fonctionnalité.

Peut-être devrais-je préciser que j’ai cliqué sur un sujet déjà cliqué, car je pensais avoir fait une erreur de clic, même s’il était déjà en cours de chargement depuis le premier clic. Il faudra probablement juste s’habituer à l’absence de spinner…