Spinner

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to purchase options extensions.

Spinners are used to show merchants that your app is loading, or an action is being performed. Generally when a spinner is being used, the user shouldn't be able to interact.

import {extend, Spinner} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {

const spinner = root.createComponent(Spinner);

root.appendChild(spinner);

setTimeout(() => {

root.removeChild(spinner);

}, 2000);

root.mount();

});

import React from 'react';

import {extend, render, Spinner} from '@shopify/admin-ui-extensions-react';

function App() {

return <Spinner />;

}

extend(

'Playground',

render(() => <App />),

);

import {extend, Spinner} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const spinner = root.createComponent(Spinner);
  root.appendChild(spinner);

  setTimeout(() => {
    root.removeChild(spinner);
  }, 2000);

  root.mount();
});

import React from 'react';
import {extend, render, Spinner} from '@shopify/admin-ui-extensions-react';

function App() {
  return <Spinner />;
}

extend(
  'Playground',
  render(() => <App />),
);

✅ Do	🛑 Don't
Use Spinner to show that content is loading, or an action is being processed	Don’t place Spinners for each loading element. Rather, Spinners should be at the top level of the section they apply to.

For more guidelines, refer to Polaris' Spinner best practices.

Was this page helpful?