Migrate SkeletonTextBlock to the Polaris skeleton paragraph component

The Polaris skeleton paragraph component displays a placeholder for block-level text content while it loads. It replaces the previous SkeletonTextBlock 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 SkeletonTextBlock 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="This is a longer block of placeholder text that spans multiple lines to approximate the final content height."
    />
  );
}

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

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

function Extension() {
  return (
    <SkeletonTextBlock>
      This is a longer block of placeholder text that spans multiple
      lines to approximate the final content height.
    </SkeletonTextBlock>
  );
}

Anchor to lineslines

The Polaris skeleton paragraph component no longer supports lines. Use content with placeholder text of representative length. The rendered line count depends on the extension's width at render time.

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

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

function Extension() {
  return (
    <s-skeleton-paragraph
      content="First line of placeholder text. Second line of placeholder text. Third line of placeholder text."
    />
  );
}

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

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

function Extension() {
  return <SkeletonTextBlock lines={3} />;
}

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 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.