Ich habe gesehen, dass andere Websites die aktuelle Seite vollständig sichtbar lassen, während die andere Seite lädt und die Ladeleiste über den Bildschirm läuft. Vielleicht ist diese Version einen Versuch wert.
Ich möchte noch etwas hinzufügen. Ich habe einen weiteren großen Unterschied zwischen Discourse und einigen anderen Websites, die einen Ladebalken verwenden, bemerkt. Die drei Websites, mit denen ich vergleiche, sind https://www.youtube.com, https://github.com und https://bookmeter.com. Hier sind die wichtigsten Unterschiede:
- Wie in meinem vorherigen Beitrag erwähnt, ersetzen diese Websites den Inhalt nicht durch eine leere Seite, sondern behalten den vorherigen Inhalt auf dem Bildschirm (kein Ausblenden oder Ähnliches), bis der neue Inhalt geladen ist.
- Im Allgemeinen bleibt viel mehr Inhalt auf dem Bildschirm, selbst nachdem die neue Seite geladen wurde. Diese Websites haben viel mehr Inhalt im oberen Menü, und manchmal gibt es sogar ein sekundäres oberes Menü, das je nach dem geklickten Link erhalten bleibt. Sie haben auch Seitenmenüs, die nach dem Navigieren zu einer neuen Seite manchmal ebenfalls erhalten bleiben. Discourse hingegen hat ein sehr einfaches oberes Menü, und nur das Suchsymbol, das Hamburger-Menü-Symbol und das Benutzersymbol bleiben immer erhalten.
Vielleicht funktioniert es gut, das Verhalten so zu ändern, dass der alte Inhalt bis zur Fertigstellung des neuen Inhalts erhalten bleibt. Es ist jedoch auch möglich, dass es nicht gut funktioniert, einfach weil so viel Inhalt ersetzt wird, egal wohin man in Discourse navigiert.
In meinem Fall verwende ich Kategorie-Banner, Tag-Banner und eine Seitenleiste, die Kategorien in Themenlisten anzeigt. Discourse bietet standardmäßig auch einige Routen, die Kopf- oder Seitenleisten beibehalten, wie etwa Benutzerprofile oder Gruppen. Ich bevorzuge es sehr, die alte Ansicht vor dem Wechsel beizubehalten, damit diese Elemente auf dem Bildschirm nicht verschwinden, um dann an derselben Stelle wieder aufzutauchen.
Ja, genau so nutzen wir seit etwa einer Woche die neue Discourse-Slider-Themenkomponente, und sie gefällt uns sehr gut. Wir haben einfach den Code für den Body-Übergang deaktiviert und verwenden nur den Slider.
Die natürliche Browseraktion beim Laden (oder Neuladen) einer Seite übernimmt den Übergang; es ist also kein zusätzlicher Code zum Ausblenden oder Leerstellen von HTML erforderlich. Dieser Slider sieht großartig aus, ohne zusätzlichen Code für Seitenübergänge (Ausblenden, Leerstellen usw.), und genau so betreiben wir ihn seit einer Woche auf unserer Website.
Vielen Dank für diesen großartigen Slider und die Möglichkeit, ihn als Themenkomponente anzupassen!
Vielleicht hast du mich missverstanden, aber das, was ich beschrieben habe, entspricht nicht der aktuellen Funktionsweise von Discourse mit der Themenkomponente. Derzeit zeigt Discourse den Großteil des Inhalts als leere Seite an, während der neue Inhalt geladen wird. Die anderen von mir verlinkten Websites behalten den aktuellen Inhalt bei, während der neue Inhalt geladen wird. Das ist nicht dasselbe.
Ich bin mir ziemlich sicher, dass ich genau verstanden habe, was du erwähnt hast, @seanblue (oben). Was du gesagt hast, ist ziemlich einfach, und dein Beitrag war meiner Meinung nach leicht zu verstehen.
Wenn du den SCSS-Body-Transition (die Animation) im ursprünglichen Discourse-Slider-Themenkomponenten auskommentierst (FWIW: Ich habe die Themenkomponente vor einer Woche durch Forken modifiziert, aber es gibt auch andere Möglichkeiten, eine Themenkomponente zu ändern).
Dann ist das Verhalten genau so, wie du es beschreibst.
Die aktuelle Seite (in unserer Modifikation) wird angezeigt, während der neue Inhalt geladen wird (was einfach das normale Verhalten beim Laden einer Seite ohne zusätzliche Body-Animation ist). Das „Ausblenden
Ah, ich habe nicht gemerkt, dass du eine abgewandelte/modifizierte Version verwendest. Das war mein Fehler. Schön, dass diese Version gut für dich funktioniert. Hoffentlich versuchen sie diesen Ansatz hier bei Meta auch.
@david / @awesomerobot Ich weiß, dass wir dies bereits einige Male hin und her diskutiert haben, aber ich denke, wir sollten die ursprüngliche Implementierung (mit geringfügigen Verbesserungen) vor einem Ausblenden ausprobieren. Lassen Sie mich die Optionen zusammenfassen, die wir beim Klicken haben:
-
Den alten Inhalt auf dem Bildschirm behalten und erst auf den neuen Inhalt umschalten, sobald er bereit ist.
-
Einen „weißen Bildschirm
Das … ist nicht richtig. Es gibt eine Ladeanimation, die sofort nach dem Klick startet. Achten Sie auf den Tab in Ihrem Browser, wenn Sie auf einen Link klicken. Beachten Sie, dass sich beim Klicken oder Tippen sofort vom Favicon zum Ladespinner gewechselt wird.
Entschuldigung, ja, genau darauf wollte ich hinaus: Wir können hier etwas simulieren, das der „Standard“-Navigation sehr nahe kommt (wir können beispielsweise das Symbol auf dem Tab während des Ladens ändern oder den Text auf dem Tab anpassen).
Wenn du auf einer Website auf einen beliebigen Link klickst, wird die aktuelle Seite nicht zu 100 % weiß und wird auch nicht undurchsichtig. Der alte Inhalt bleibt für eine gewisse Zeit auf dem Bildschirm sichtbar, bis die DNS-Auflösung für die neue Seite abgeschlossen ist und der neue Inhalt gerendert werden kann.
Für mich liegt die große Stärke dieser Komponente darin, Zwischenzustände zu reduzieren. Wenn wir es durch eine Simulation so „fühlen“ lassen können, als handele es sich um die Standard-Browsernavigation, wäre das sehr gut.
Kein Problem. Uns gefällt der Slider wirklich gut (mit ein paar zusätzlichen Pixeln für den Desktop); wir haben jedoch festgestellt, dass keine Körperanimationen (Ausblenden, Ein-/Ausblenden oder ähnliches) erforderlich sind.
Der Slider zeigt das Laden ausreichend gut an; die Seite lädt und wechselt auf natürliche Weise, ohne dass zusätzliche CSS-Übergänge für den Körper oder weitere Ladespinner hinzugefügt werden müssen. Wir betreiben es seit etwa 8 oder 9 Tagen auf diese Weise, die Benutzer sind zufrieden, und mir gefällt es ebenfalls. Den Benutzern gefielen die „Ein-/Ausblende-Animationen
klingt gut, ich habe die Komponente wieder auf diese ursprüngliche Implementierung zurückgesetzt.
Ich denke, dass das „oh nein, 2 Sekunden vergangen, Ladeanzeige anzeigen
Wo soll es angezeigt werden? Als eine Art Modal? Oder sollte #main-outlet nach 2 Sekunden ausgeblendet werden, um Platz für einen Ladeindikator zu machen?
Ich denke, wir sollten den Hauptausgang verstecken. Wir sollten vielleicht den Schwellenwert anpassen; 2 ist etwas willkürlich, vielleicht 3, 4 oder 5?
Der Ladebalken wird nun nach 2 Sekunden angezeigt:
Das ist ziemlich cool: Ohne zusätzliche Spinner-Ebene nach 2 Sekunden würde es für die Nutzer seltsam werden. So haben wir das Beste aus beiden Welten: 1. Wir tun so, als wären wir blitzschnell, dank des Sliders (hier schummeln wir, TBO). 2. Wir füllen die Lücke, falls das Laden hängen bleibt (psychologischer Übergang).
Gut gemacht! ![]()
Ich habe es gerade in einem simulierten langsamen Netzwerk getestet, und der Spinner nach 2 Sekunden fühlt sich für mich definitiv gut an. Ich möchte jedoch noch einmal betonen, dass der Ladebalken auf dem Desktop (zumindest auf einem relativ großen Monitor) praktisch nicht vorhanden ist. Ich denke, weitere 2–3 Pixel in vertikaler Richtung würden schon einen großen Unterschied machen.
Ich verfolge diese Diskussion, da ich ein brandneuer Benutzer von Discourse bin. Ich muss sagen, dass ich sehr beeindruckt bin von der Denkweise und der harten Arbeit, die in dieses sehr „moderne
Vielleicht sollte ich erwähnen, dass ich ein Thema geklickt habe, nachdem ich es bereits geklickt hatte, weil ich dachte, ich hätte mich vertippt, obwohl es schon vom ersten Klick aus lud. Wahrscheinlich muss ich mich einfach an das Fehlen des Ladeindikators gewöhnen…