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

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

Anchor to Migration exampleMigration example

Migrating SkeletonDisplayText

export function SkeletonDisplayTextMigrationExample() {

return (

<><s-spinner accessibilityLabel="Loading heading"></s-spinner></>

);

}

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

export function SkeletonDisplayTextMigrationExample() {

return (

);

}

Polaris web components

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

Polaris React

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


export function SkeletonDisplayTextMigrationExample() {

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

Preview

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

Was this page helpful?