Nextjs 13 comes with lots of experimental features, one of them was the appDir. Let’s talk about the loading UI.
Suppose we want to show some UI, may be some cool spinner while data is fetching from the server.
Usually, such UI can be implemented by checking the loading status or wrapping the JSX within a suspense block.
In Next’s latest version they have provided a loading UI, which handle the task.
Create loading.jsx file in the route and export a default component. The loading component will render while data is fetching. No additional coding is required.
//posts/loading.jsx
export default function Loading() {
return(
<div>
Data is loading
</div>
)
}
- Array map to new type in TypeScript
- Create a dark mode theme switch in Nextjs 13
- Not found page UI in Nextjs 13
- Implementing a loading UI in Nextjs 13
- How to fetch data in Nextjs 13 appDir
- How to use Turbopack build tool in Nextjs project
- Super expression error in Next 13
- Try Next 13 experimental App feature
- Integrate contentful CMS in Nextjs
- How to build a blog using Tailwind + Graphql + Nextjs
Developer stories 