Next.js

Loading UI

Platshållarvy som visas medan en sida eller komponent hämtar data, implementerat via React Suspense i Next.js App Router.

I Next.js App Router skapar du en loading.js-fil i en route-mapp och den renderas automatiskt som Suspense-fallback medan sidan laddar data. Besökaren ser ett skelett eller laddningsindikator direkt, i stället för en blank sida eller inget alls.

Du kan också omsluta individuella delar av en sida med <Suspense fallback={<Skeleton />}> för mer granulär kontroll. Det låter snabba delar av sidan visas omedelbart medan långsamma delar laddas in.

Loading UI bör representera layouten på det faktiska innehållet — ett skelett med ungefärlig form sätter rätt förväntning och minskar layouthopp när riktigt innehåll dyker upp.