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

Anchor to Map page loading behaviorMap 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.

Anchor to Migration exampleMigration example

Migrating SkeletonPage

export function SkeletonPageMigrationExample() {

return (

<><s-page heading="Products"><s-section><s-spinner accessibilityLabel="Loading products"></s-spinner></s-section></s-page></>

);

}

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

export function SkeletonPageMigrationExample() {

return (

);

}

Polaris web components

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

Polaris React

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


export function SkeletonPageMigrationExample() {

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

Preview

Anchor to Test and remove Polaris ReactTest 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.

Was this page helpful?