Skip to main content

Loading

Note

This is a legacy API. Use the latest version of 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.

You can use the features action in the following ways:

  1. Plain JavaScript
  2. React component

Anchor to Plain JavaScriptPlain JavaScript

Anchor to Example codeExample 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.

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

const app = createApp(config);

const loading = Loading.create(app);

Anchor to Start loadingStart 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.

loading.dispatch(Loading.Action.START);

Anchor to Stop loadingStop loading

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

loading.dispatch(Loading.Action.STOP);

Anchor to Subscribe to actionsSubscribe to actions

You can subscribe to actions from the loading action set.

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

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

Anchor to Subscribe to all actionsSubscribe to all actions

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

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

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

Anchor to ReactReact

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.

Anchor to Example codeExample 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.

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.

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 />);
Was this page helpful?