---
title: Spinner
description: >-
  Spinners are used to show merchants that your app is loading, or an action is
  being performed.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/spinner
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/spinner.md
---

# Spinner

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/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.

##### JavaScript

```ts
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();
});
```

##### React

```tsx
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](https://polaris.shopify.com/components/feedback-indicators/spinner#best-practices).

***