After you've applied all the optimizations, it is possible that your page still takes some time to load. This may be because you need to fetch and process a large amount of data in the backend, or may be it is a financial consideration and you do not want to spend too much on server upgrades.
Regardless, even if the server takes a while to process the request, you should not keep the users waiting without any responses. In this case, it is best to create a loading UI to tell the user that something is being done, instead of just letting the user wait and not see any visual changes.
Users are more likely to wait until the pages load if there is a meaningful loading UI that shows them something is being done, otherwise it may appear as if the web app is simply not responding.
Route segment loading UI
There are two ways to define loading UIs in Next.js. One approach is to create loading.jsx files for different route segments. Here's an example of how your file structure might look:
1src/app
2├── blog
3│ ├── loading.jsx
4│ └── page.jsx
5├── dashboard
6│ ├── loading.jsx
7│ ├── page.jsx
8│ └── users
9│ ├── loading.jsx
10│ └── page.jsx
11├── favicon.ico
12├── globals.css
13├── layout.jsx
14└── page.jsxWith this setup, can define different loading.jsx for different route segments. And whenever the corresponding route is visited, the loading UI will be displayed first, until the page.jsx finishes loading.
For example:
page.jsx
1export default async function Page() {
2 await new Promise((resolve) => setTimeout(resolve, 3000)); // Simulates data fetching
3
4 return <p className="text-gray-600">Hello, World!</p>;
5}