The loading action set is used to indicate to merchants that a page is loading or an upload is processing.


Create an app and import the Loading module from @shopify/app-bridge/actions. Note that we'll be referring to this sample application throughout the examples below.

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

const app = createApp({
  apiKey: '12345',
  shopOrigin: shopOrigin,

const loading = Loading.create(app);

Start loading

Call the START loading action when loading new pages or completing asynchronous requests that might be more than a few seconds:


Stop loading

After the loading action is complete, you can dispatch the STOP loading action:


Subscribe to actions

You can subscribe to actions that are dispatched through the loading action set:

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:

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

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

Sign up for a Partner account to get started.

Sign up