---
title: loading.js
description: API reference for the loading.js  file.
url: "https://nextjs.org/docs/14/app/api-reference/file-conventions/loading"
version: 14.2.35
lastUpdated: 2023-10-27
prerequisites:
  - "API Reference: /docs/14/app/api-reference"
  - "File Conventions: /docs/14/app/api-reference/file-conventions"
---


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. |
---

For an index of all available documentation, see [/docs/14/llms.txt](/docs/14/llms.txt)