> Note:
> This is a legacy API. Use the latest version of [`Loading`](/docs/api/app-bridge-library/apis/loading) instead.

Use the loading action set to indicate to users that a page is loading or an upload is processing.

<img alt="A close-up image of the top of the Shopify admin. Running horizontally along the top is a green loading bar. It spans approximately two-thirds the width of the image." src="/assets/apps/tools/app-bridge-loading.png" style="display: block; width: 100%; max-width: 524px" />

You can use the features action in the following ways:

1. [Plain JavaScript](#plain-javascript)
2. [React component](#react)

## Plain JavaScript

### Example code

Import the `createApp` function from `@shopify/app-bridge` and the `Loading` from `@shopify/app-bridge/actions`. Then use the `createApp` function to create an app.

> Note
> In the following example, `config` is a valid App Bridge configuration object. Learn more about [configuring App Bridge](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app).


```js
import createApp from '@shopify/app-bridge';
import {Loading} from '@shopify/app-bridge/actions';

const app = createApp(config);

const loading = Loading.create(app);
```

### Start loading

Dispatch the `START` loading action when loading new pages or starting asynchronous requests if there will be a noticeable delay in loading the content.

```js
loading.dispatch(Loading.Action.START);
```

### Stop loading

After the loading action is complete, dispatch the `STOP` loading action.

```js
loading.dispatch(Loading.Action.STOP);
```

### Subscribe to actions

You can subscribe to actions from the loading action set.

```js
loading.subscribe(Loading.Action.START, () => {
  // Do something when loading starts
});

loading.subscribe(Loading.Action.STOP, () => {
  // Do something when loading stops
});
```

### Subscribe to all actions

You can subscribe to all loading actions, regardless of which action sets trigger the actions:

```js
app.subscribe(Loading.Action.START, () => {
  // Do something when loading starts
});

app.subscribe(Loading.Action.STOP, () => {
  // Do something when loading stops
});
```

## React

The App Bridge React library provides a `Loading` component to indicate to users that a page is loading or an upload is processing.
Render the `Loading` component if there will be a noticeable delay in loading the content.

### Example code

Import the `Loading` component from `@shopify/app-bridge-react`.

> Note
> In the following example, `config` is a valid App Bridge configuration object. Learn more about [configuring App Bridge](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/app-setup#initialize-shopify-app-bridge-in-your-app).

> Note
> When using the App Bridge React library, you need to wrap all of your App Bridge React code inside of a single App Bridge [`Provider`](/docs/api/app-bridge/previous-versions/app-bridge-from-npm/using-react#provider).


```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider, Loading} from '@shopify/app-bridge-react';

function MyApp() {
  // Some app logic will decide the state of loading.
  const loading = true;

  // Conditionally rendering the `Loading` component is a common pattern.
  const loadingComponent = loading ? <Loading /> : null;

  return (
    <Provider config={config}>
      {loadingComponent}
    </Provider>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<MyApp />);
```