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

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

Anchor to Migration exampleMigration example

Migrating SkeletonBodyText

export function SkeletonBodyTextMigrationExample() {

return (

<s-spinner accessibilityLabel="Loading product description" />

);

}

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

export function SkeletonBodyTextMigrationExample() {

return (

);

}

Polaris web components

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

Polaris React

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


export function SkeletonBodyTextMigrationExample() {

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

Preview

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

Was this page helpful?