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

# Migrate Skeleton​Page from Polaris React

`SkeletonPage` has no direct Polaris web component equivalent. Keep it during an incremental migration. If removing Polaris React is required, render the real `s-page` shell with a stable heading and show loading feedback only in the content regions that are pending.

***

## Map page loading behavior

| Polaris React usage | Polaris web components | Migration notes |
| - | - | - |
| Skeleton page title | `s-page heading` | Use the route title when it is already known. |
| Skeleton page body | `s-section` with a labelled `s-spinner` | Keep the page structure stable and replace the region when data arrives. |
| Entire route navigation | Loading API | Coordinate host loading feedback with the router and clear it on success or failure. |
| Skeleton actions | Hide unavailable actions or render real disabled actions with an explanation | Don't display controls that look actionable but have no outcome. |

Migrate the route's loading, error, empty, and loaded states together. A page that removes the skeleton but has no failure state isn't complete.

***

## Migration example

## Migrating SkeletonPage

##### Polaris web components

```tsx
export function SkeletonPageMigrationExample() {
  return (
    <><s-page heading="Products"><s-section><s-spinner accessibilityLabel="Loading products"></s-spinner></s-section></s-page></>
  );
}
```

##### Polaris React

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


export function SkeletonPageMigrationExample() {

  return (
    <SkeletonPage title="Products"><Card><SkeletonBodyText /></Card></SkeletonPage>
  );
}
```

***

## Test and remove Polaris React

* Load the route directly and through app navigation.
* Test fast, slow, failed, retried, and cancelled requests.
* Verify the page heading, title-bar actions, focus, and loading indicator don't become stale after navigation.

***