Loading

The Loading component is used to indicate to merchants that a page is loading or an upload is processing. Render the Loading component when loading new pages or completing asynchronous requests that might be more than a few seconds.

Setup

Import the Provider and Loading component from @shopify/app-bridge-react. Only one Provider is needed for your application.

Conditionally rendering the Loading component is a common pattern:

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

function MyApp() {
  const config = {apiKey: '12345', shopOrigin: shopOrigin};

  const loading = isTheAppLoading();
  const loadingComponent = loading ? <Loading /> : null;

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

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