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

# Migrate Skeleton​Display​Text from Polaris React

`SkeletonDisplayText` has no direct Polaris web component equivalent. Keep it during an incremental migration. If removing Polaris React is required, show a labelled loading indicator for the heading's region, then render the real `s-heading` when its text is known.

***

## Map loading behavior

| Polaris React | Polaris web components | Migration notes |
| - | - | - |
| `size` | No direct equivalent | Don't reproduce a heading-shaped placeholder only to match the old visual size. |
| Skeleton for an in-page heading | `s-spinner` with `accessibilityLabel` | Name the resource or section that is loading. |
| Page title loading | Stable `s-page heading` when the route already knows it | Don't replace a known route title with a skeleton. |

If the heading determines page structure, then prefer a stable route heading and load only the dependent content beneath it.

***

## Migration example

## Migrating SkeletonDisplayText

##### Polaris web components

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

##### Polaris React

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


export function SkeletonDisplayTextMigrationExample() {

  return (
    <SkeletonDisplayText size="medium" />
  );
}
```

***

## Test and remove Polaris React

* Verify heading order before, during, and after loading.
* Test slow, failed, and retried requests without announcing repeated generic loading messages.
* Remove `SkeletonDisplayText` only after every call site has a stable heading or a labelled regional loading state.

***