---
title: Loading
description: Learn more about the Loading action set in App Bridge.
api_name: app-bridge
source_url:
  html: https://shopify.dev/docs/api/app-bridge/previous-versions/actions/loading
  md: https://shopify.dev/docs/api/app-bridge/previous-versions/actions/loading.md
---

ExpandOn this page

* [Plain Java​Script](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/loading#plain-javascript)
* [React](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/loading#react)

# Loading

Note

This is a legacy API. Use the latest version of [`Loading`](https://shopify.dev/docs/api/app-home/apis/loading) instead.

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

![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.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/tools/app-bridge-loading--dLiYZx3.png)

You can use the features action in the following ways:

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

***

## Plain Java​Script

### 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](https://shopify.dev/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](https://shopify.dev/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`](https://shopify.dev/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 />);
```

***

* [Plain Java​Script](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/loading#plain-javascript)
* [React](https://shopify.dev/docs/api/app-bridge/previous-versions/actions/loading#react)