mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Zoe-BotandGitHub
f538232fda
Fix bug in example code. Loading with `'` can not be built with the default ESLint rules: ```ssh ./src/app/reviews/loading.tsx 4:15 Error: `'` can be escaped with `'`, `‘`, `'`, `’`. react/no-unescaped-entities 4:26 Error: `'` can be escaped with `'`, `‘`, `'`, `’`. react/no-unescaped-entities ```
35 lines
1.1 KiB
Plaintext
35 lines
1.1 KiB
Plaintext
---
|
|
title: loading.js
|
|
description: API reference for the loading.js file.
|
|
---
|
|
|
|
A **loading** file can create instant loading states built on [Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming).
|
|
|
|
By default, this file is a [Server Component](/docs/app/building-your-application/rendering/server-components) - but can also be used as a Client Component through the `"use client"` directive.
|
|
|
|
```tsx filename="app/feed/loading.tsx" switcher
|
|
export default function Loading() {
|
|
// Or a custom loading skeleton component
|
|
return <p>Loading...</p>
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/feed/loading.js" switcher
|
|
export default function Loading() {
|
|
// Or a custom loading skeleton component
|
|
return <p>Loading...</p>
|
|
}
|
|
```
|
|
|
|
Loading UI components do not accept any parameters.
|
|
|
|
> **Good to know**
|
|
>
|
|
> - While designing loading UI, you may find it helpful to use the [React Developer Tools](https://react.dev/learn/react-developer-tools) to manually toggle Suspense boundaries.
|
|
|
|
## Version History
|
|
|
|
| Version | Changes |
|
|
| --------- | --------------------- |
|
|
| `v13.0.0` | `loading` introduced. |
|