Petite note en passant, mais je me suis récemment souvenu que XenForo a toujours eu un curseur de chargement. Je suis ravi de voir que Discourse en a maintenant un similaire. ![]()
Je me demande ce qui sera le plus ennuyeux lorsque le réseau est mauvais.
Super ! ![]()
Vous pouvez simuler des conditions de réseau médiocres en utilisant la console F12 de Chrome, si vous le souhaitez.
Mise à jour sur l’iPhone 6s :
L’apparence est excellente avec le thème sombre désormais, ainsi qu’avec de nombreux autres thèmes sur mobile.
Bien joué !
Mise à jour sur le bureau :
Le curseur de chargement reste à peine visible sur Chromium avec des écrans ROG de 27" et 34".
Pourrions-nous avoir une option de thème permettant d’activer ou de désactiver selon mobile ou bureau ?
Je peux reproduire le problème lors de l’utilisation de la connexion Facebook. Il semble que cela soit dû au paramètre d’URL #_=_.
J’ai constaté que la désactivation du plugin discourse-topic-list-previews résout tous les problèmes liés au Loading slider ; dès que je le réactive, le problème réapparaît.
Nous n’utilisons aucune connexion tierce, il semble donc qu’il s’agisse d’un bug distinct (ou peut-être lié ?).
Édit : En fait, avec les deux plugins activés, la page reste floue uniquement sur les sujets où discourse-topic-list-previews a trouvé une image pour remplacer celle par défaut… ainsi que sur la page des catégories.
Suite aux tests effectués sur mobile et sur ordinateur avec de nombreux thèmes, il semble qu’une solution comme celle-ci donne un excellent résultat pour ce slider génial :
height: 4px;
@media only screen and (min-width: 960px) {
height: 7px;
}
Ajouter un seul pixel (passer de 3px à 4px) par défaut donne un très bon rendu sur mobile ; et sur les grands écrans d’ordinateur, au-delà de 5px, l’effet est agréable, mais je me suis arrêté à 7px pour le moment ![]()
Je continuerai à travailler là-dessus un peu plus à mesure que j’aurai du temps, en testant avec différents thèmes sur les grands écrans d’ordinateur et sur mes iPhones.
Puis-je revenir sur la première partie de ce point ? Après l’avoir testé sur ordinateur, le fondu en sortie est plus irritant que le curseur. Je pense que c’est parce que lorsque je clique sur un lien vers la page B, je m’attends soit à ce que la page A disparaisse immédiatement (comme le faisait Discourse auparavant), soit qu’elle reste affichée jusqu’à l’apparition de B (comme sur les pages web).
Bonjour, vous pouvez utiliser ceci pour désactiver l’opacité. Créez un nouveau composant dans l’administration et ajoutez-le à la section commune. ![]()
body.loading #main-outlet {
opacity: 1 !important;
}
Mais à ce stade, quel est l’intérêt de cela par rapport au spinner ? Juste pour voir un curseur de chargement ?
Cela désactive simplement l’effet de fondu. C’était la première version. Seul le curseur supérieur, sans effet de fondu.
En quelque sorte…
La première itération n’avait… aucun effet du tout, vous ne receviez donc aucun retour visuel après avoir cliqué sur un lien autre qu’un curseur, ce qui n’était pas idéal.
Je suis un peu partagé entre avoir la page opaque ou la page vide au clic. Je reconnais que cela peut être un peu distrayant, peut-être que fondre vers 0 au clic serait mieux… je ne suis pas sûr.
Oui, je pense aussi… C’est vraiment difficile… Peut-être que des effets modifiables seraient bien pour tout le monde. ![]()
Personnellement, j’aime vraiment l’effet de fondu comme ça. ![]()
Le seul problème avec une opacité de 0, c’est qu’à ce stade, cela n’affecte que main-outlet. Le header et le below-site-header restent visibles.
Je suppose que j’essaie d’exprimer ma frustration personnelle concernant l’effet de fondu (du moins sur ordinateur) @awesomerobot / @david
Je trouve très difficile de lire le texte estompé, donc à chaque transition, mon cerveau est forcé de lire un texte estompé pendant une fraction de seconde, ce qui est un peu fatigant.
Peut-être que si cela fonçait jusqu’à disparaître complètement, ce serait mieux, je ne sais pas. Une partie du problème vient aussi du fait que je suis à 250 ms de distance, donc au minimum, je vais passer environ 300 ms à attendre, ce qui garantit qu’une certaine durée sera consacrée à regarder des lettres estompées.
Pour info,
J’ai commenté la transition du corps (le texte qui s’estompe) et je pense que cela semble correct (et peut-être même plus rapide) sans transition du corps. C’est du pareil au même…
// body #main-outlet {
// transition: opacity 0.2s ease;
// }
// body.loading #main-outlet {
// opacity: 0.2;
// transition: opacity var(--loading-duration) ease;
// }
Merci Don, ça va faire l’affaire ![]()
Oui, sur mobile, je pensais que l’effet de fondu améliorait le curseur, mais je n’avais pas bien examiné le bureau avant que le fondu ne soit introduit. (Sur le bureau, je trouvais le fondu irritant.)

