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);