Loading.js

loading.js is a file convention that lets you define fallback UI for a route segment when it's loading, enabling prefetching and instant navigation for dynamic routes.

When a user navigates to a dynamic route with prefetched fallback UI, the URL updates immediately and the loading state is shown while the segment loads.

Use filesystem hierarchy to define more or less specific fallback UI.

Demo

Navigate between categories using the menu above.
Instant navigation: Even though the new route segment is still rendering on the server, we can instantly navigate (update the url and render fallback UI) to the new route. The actual segment content streams in once rendering is complete.

Notes

An artificial delay is added to pages to simulate a slow data request and make the loading state more noticeable.

Links

Docs
Code

All (3)

self.__VINEXT_RSC_CHUNKS__=self.__VINEXT_RSC_CHUNKS__||[];self.__VINEXT_RSC_CHUNKS__.push("1:[\"$\",\"div\",null,{\"className\":\"relative border border-dashed border-gray-800 animate-[rerender_1s_ease-in-out_1] text-blue-600\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"className\":\"absolute flex -translate-y-1/2 gap-x-1 text-[9px] left-4 lg:left-9\",\"children\":[[\"$\",\"div\",\"[section]/page.tsx\",{\"className\":\"px-1.5 font-mono leading-4 font-medium tracking-widest uppercase ring-6 ring-gray-950 bg-gray-800 text-gray-500 animate-[highlight_1s_ease-in-out_1]\",\"children\":\"[section]/page.tsx\"}]]}],[\"$\",\"div\",null,{\"className\":\"p-4 lg:p-9\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-4\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-xl font-semibold text-gray-300\",\"children\":[\"All\",\" \",[\"$\",\"span\",null,{\"className\":\"font-mono tracking-tighter text-gray-600\",\"children\":[\"(\",3,\")\"]}]]}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 gap-6 lg:grid-cols-3\",\"children\":[[\"$\",\"div\",\"4\",{\"className\":\"group flex flex-col gap-2.5\",\"children\":[[\"$\",\"div\",null,{\"className\":\"overflow-hidden rounded-md bg-gray-900/50 p-8 group-hover:bg-gray-900\",\"children\":[\"$\",\"img\",null,{\"ref\":\"$undefined\",\"src\":\"/_vinext/image?url=%2Fshop%2Fphone.png\u0026w=400\u0026q=90\",\"alt\":\"Phone\",\"width\":400,\"height\":400,\"loading\":\"lazy\",\"fetchPriority\":\"$undefined\",\"decoding\":\"async\",\"srcSet\":\"/_vinext/image?url=%2Fshop%2Fphone.png\u0026w=640\u0026q=90 640w, /_vinext/image?url=%2Fshop%2Fphone.png\u0026w=750\u0026q=90 750w\",\"sizes\":\"$undefined\",\"className\":\"transition-enter\",\"data-nimg\":\"1\",\"onLoad\":\"$undefined\",\"style\":{}}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-2 w-4/5 rounded-full bg-gray-800\"}],[\"$\",\"div\",null,{\"className\":\"h-2 w-1/3 rounded-full bg-gray-800\"}]]}]]}],[\"$\",\"div\",\"5\",{\"className\":\"group flex flex-col gap-2.5\",\"children\":[[\"$\",\"div\",null,{\"className\":\"overflow-hidden rounded-md bg-gray-900/50 p-8 group-hover:bg-gray-900\",\"children\":[\"$\",\"img\",null,{\"ref\":\"$undefined\",\"src\":\"/_vinext/image?url=%2Fshop%2Flaptop.png\u0026w=400\u0026q=90\",\"alt\":\"Laptop\",\"width\":400,\"height\":400,\"loading\":\"lazy\",\"fetchPriority\":\"$undefined\",\"decoding\":\"async\",\"srcSet\":\"/_vinext/image?url=%2Fshop%2Flaptop.png\u0026w=640\u0026q=90 640w, /_vinext/image?url=%2Fshop%2Flaptop.png\u0026w=750\u0026q=90 750w\",\"sizes\":\"$undefined\",\"className\":\"transition-enter\",\"data-nimg\":\"1\",\"onLoad\":\"$undefined\",\"style\":{}}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-2 w-4/5 rounded-full bg-gray-800\"}],[\"$\",\"div\",null,{\"className\":\"h-2 w-1/3 rounded-full bg-gray-800\"}]]}]]}],[\"$\",\"div\",\"6\",{\"className\":\"group flex flex-col gap-2.5\",\"children\":[[\"$\",\"div\",null,{\"className\":\"overflow-hidden rounded-md bg-gray-900/50 p-8 group-hover:bg-gray-900\",\"children\":[\"$\",\"img\",null,{\"ref\":\"$undefined\",\"src\":\"/_vinext/image?url=%2Fshop%2Ftablet.png\u0026w=400\u0026q=90\",\"alt\":\"Tablet\",\"width\":400,\"height\":400,\"loading\":\"lazy\",\"fetchPriority\":\"$undefined\",\"decoding\":\"async\",\"srcSet\":\"/_vinext/image?url=%2Fshop%2Ftablet.png\u0026w=640\u0026q=90 640w, /_vinext/image?url=%2Fshop%2Ftablet.png\u0026w=750\u0026q=90 750w\",\"sizes\":\"$undefined\",\"className\":\"transition-enter\",\"data-nimg\":\"1\",\"onLoad\":\"$undefined\",\"style\":{}}]}],[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-2\",\"children\":[[\"$\",\"div\",null,{\"className\":\"h-2 w-4/5 rounded-full bg-gray-800\"}],[\"$\",\"div\",null,{\"className\":\"h-2 w-1/3 rounded-full bg-gray-800\"}]]}]]}]]}]]}]}]]}]\n")alt="Tablet" width="400" height="400" loading="lazy" decoding="async" srcSet="/_vinext/image?url=%2Fshop%2Ftablet.png&w=640&q=90 640w, /_vinext/image?url=%2Fshop%2Ftablet.png&w=750&q=90 750w" class="transition-enter" data-nimg="1"/>

Playground

All (3)

All

All (3)