Migrate to the Polaris spinner component

The Polaris spinner component displays an animated loading indicator for ongoing operations. It replaces the previous Spinner component and is available as <s-spinner> in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

The following properties are different in the Polaris spinner component.

Anchor to sizesize

The size prop values have changed to use a more consistent naming system.

For more on the scale system, see Scale.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return <s-spinner size="small-100" accessibilityLabel="Loading..." />;
}

import {
  reactExtension,
  Spinner,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return <Spinner size="extraSmall" accessibilityLabel="Loading..." />;
}

Anchor to Removed propertiesRemoved properties

Anchor to appearanceappearance

The Polaris spinner component no longer supports appearance. The spinner automatically adapts its color based on context, so you don't need to set appearance="monochrome" for visual consistency.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return <s-spinner size="base" accessibilityLabel="Loading..." />;
}

import {
  reactExtension,
  Spinner,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Spinner
      appearance="monochrome"
      size="base"
      accessibilityLabel="Loading..."
    />
  );
}