---
title: Migrate SkeletonBodyText from Polaris React
description: >-
  Understand the supported migration path for the Polaris React SkeletonBodyText
  component.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/skeleton-body-text
  md: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/skeleton-body-text.md
api_name: app-home
---

# Migrate Skeleton​Body​Text from Polaris React

`SkeletonBodyText` has no direct Polaris web component equivalent. Keep it during an incremental migration. If removing Polaris React is required, replace the skeleton with a labelled loading indicator for the content region and render the real paragraphs when data is available.

***

## Map loading behavior

| Polaris React | Polaris web components | Migration notes |
| - | - | - |
| `lines` | No direct equivalent | Don't create decorative boxes that imitate text without conveying loading state. |
| Skeleton inside one section | `s-spinner` with `accessibilityLabel` | Name the pending content, such as `Loading product description`. |
| Skeleton for a route | Loading API | Use host-level loading feedback when the entire route is pending. |

Keep the containing section mounted when that prevents a disruptive layout shift. Don't set a fake fixed height that clips translated or zoomed content after it loads.

***

## Migration example

## Migrating SkeletonBodyText

##### Polaris web components

```tsx
export function SkeletonBodyTextMigrationExample() {
  return (
    <s-spinner accessibilityLabel="Loading product description" />
  );
}
```

##### Polaris React

```tsx
import {SkeletonBodyText} from '@shopify/polaris';


export function SkeletonBodyTextMigrationExample() {

  return (
    <SkeletonBodyText lines={3} />
  );
}
```

***

## Test and remove Polaris React

* Test fast, slow, failed, and retried requests.
* Verify that assistive technology receives one useful loading announcement and the loaded content remains discoverable.
* Remove `SkeletonBodyText` only after every call site has a real loading, error, and empty state.

***