reactjs / reactjs/react.dev

How to keep the current page/view when lazy loading?

Offen
#2,927 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
1 T. 11 Std.
Gemergte PRs (30 T.)
11

Beschreibung

I do not know whether it is possible to instruct Suspense to use the current page/view as the fallback component until the next view is ready to be rendered.

Indeed, in order to achieve YouTube or GitHub like loading with a top linear progress bar on the current view, we need a way to instruct the Suspense component to not unmount the current view straight away or to just add an additional child component to the current view.

The documentation would benefit from adding such example, as this behaviour is now the industry norm and it greatly improves the UX. As on StackOverflow and other relevant forums no one seems to know how to do:
https://stackoverflow.com/questions/55669865/is-it-possible-to-keep-the-current-component-mounted-as-the-fallback-content-f
https://stackoverflow.com/questions/57741868/how-can-react-suspense-remain-on-the-same-page-lazyloading

However, I am not sure this is possible right now, and if not putting it on the backlog as a new feature will be useful.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, das im Issue beschriebene Suspense-Verhalten und die beiden verlinkten Diskussionen zu prüfen, um festzustellen, ob die aktuelle Ansicht während des Lazy Loading gemountet bleiben kann. Dokumentiere das unterstützte Verhalten nach Möglichkeit mit einem Ladebeispiel oder stelle klar, dass das angeforderte Fallback-Verhalten derzeit nicht verfügbar ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
documentation, frontend
Issue-Typ
Dokumentation
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.