Loading

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

Examples

Use to indicate that the page is loading.

Drag to resize example

Accessibility

The loading component is implemented using the ARIA 1.1 progressbar pattern. It outputs an ARIA role="progressbar" and uses aria-valuemin, aria-value-max, and aria-valuenow to convey the loaded percentage to screen reader users.

Required components

The loading component must be wrapped in the frame component or used in an embedded application.


Use in an embedded application (deprecated)

Passing an API key to the app provider component causes the loading component to delegate to the Shopify App Bridge instead of rendering as it would in a stand-alone application.

function EmbeddedAppLoadingExample() {
  const [loading] = useState(false);

  const loadingMarkup = loading && <Loading />;

  return (
    <AppProvider apiKey="YOUR_API_KEY" i18n={{}} shopOrigin="YOUR_SHOP_ORIGIN">
      {loadingMarkup}
    </AppProvider>
  );
}

Deprecation rationale

As of v3.17.0, using Loading in an embedded app is deprecated. Support for this will be removed in v5.0 as the underlying Shopify App Bridge library will be removed from Polaris React. Learn more about the deprecation rationale. Use Loading from @shopify/app-bridge-react instead.


Best practices

The loading component should:

  • Indicate that the page requested is loading.
  • Indicate that an upload has started and the action will soon complete.
  • Be used to give feedback for an entire page load or a page mutation like saving a product.
  • Be used alongside a component or page element that contains aria-busy to represent what is loading.