Migrate SkeletonText to the Polaris skeleton paragraph component

The Polaris skeleton paragraph component displays a placeholder for text content while it loads. It replaces the previous SkeletonText component and is available as <s-skeleton-paragraph> in API versions 2025-10 and newer.

Anchor to Removed propertiesRemoved properties

Anchor to childrenchildren

The previous SkeletonText component accepted any React node as children to size the placeholder. The Polaris skeleton paragraph doesn't render children. Use the content property instead, which accepts a string only. The content value is hidden and used only to size the skeleton.

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

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

function Extension() {
  return <s-skeleton-paragraph content="Order total" />;
}

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

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

function Extension() {
  return <SkeletonText>Order total</SkeletonText>;
}

Anchor to sizesize

The Polaris skeleton paragraph component no longer supports size. The skeleton renders at a single default text size. If you need the skeleton to approximate a specific height, use content with placeholder text of representative length. The rendered height depends on the extension's width at render time.

Anchor to inlineSizeinlineSize

The Polaris skeleton paragraph component no longer supports inlineSize. The skeleton fills the full width of its container by default. If you previously used inlineSize to control the skeleton's width, use the content property with placeholder text to approximate the desired size.

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

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

function Extension() {
  return <s-skeleton-paragraph content="Placeholder" />;
}

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

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

function Extension() {
  return <SkeletonText inlineSize="small" />;
}

Anchor to Updated patternsUpdated patterns

Before migrating your skeleton components, consider whether you still need them:

• Automatic skeletons: Shopify now automatically displays skeleton loading states when your app extension is loading. These provide a generic placeholder that roughly matches the size of your extension, so you might not need to manage skeletons manually.
• Use loading states instead: Consider leveraging disabled states of components or the loading prop on <s-button> to indicate that something is loading, rather than replacing the entire block with skeletons.
• Skeleton only the loading content: Skeleton only the piece of content that's loading, not the entire UI.