---
title: Migrate SkeletonTextBlock to the Polaris skeleton paragraph component
description: >-
  Learn how to migrate the SkeletonTextBlock component to Polaris web components
  in checkout and customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/skeleton-text-block
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/skeleton-text-block.md
---

# 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`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/skeletontextblock) component and is available as [`<s-skeleton-paragraph>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/typography-and-content/skeleton-paragraph) in API versions 2025-10 and newer.

***

## Removed properties

### children

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`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/typography-and-content/skeleton-paragraph#properties-propertydetail-content) property instead, which accepts a `string` only. The `content` value is hidden and used only to size the skeleton.

## Migrating children to content

##### Latest (Preact)

```tsx
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."
    />
  );
}
```

##### Pre-Polaris (2025-07)

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

### lines

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.

## Migrating lines

##### Latest (Preact)

```tsx
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."
    />
  );
}
```

##### Pre-Polaris (2025-07)

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

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

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

### size

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.

***

## Updated 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>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/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.

***