Implementing a loading UI in Nextjs

appDir feature

Nextjs 13 comes with lots of experimental features, one of them was the appDir. Let's talk about the loading UI.

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>
  )
}