Migrate SkeletonThumbnail from Polaris React

SkeletonThumbnail has no direct Polaris web component equivalent. Keep it during an incremental migration. If removing Polaris React is required, reserve the image region and use a labelled loading indicator or the resource's documented fallback until the real s-thumbnail source is available.

Anchor to Map thumbnail loading behaviorMap thumbnail loading behavior

Polaris React	Polaris web components	Migration notes
`size`	Reserve the destination thumbnail's supported size	Keep row height stable without copying an undocumented skeleton shape.
Skeleton while fetching the image URL	Labelled `s-spinner` in the image region	Name the resource that is loading when the surrounding text doesn't already do so.
Missing or failed image	`s-thumbnail` fallback and meaningful `alt` text	Treat failure differently from loading and don't leave the spinner running.

Don't assign the eventual image's alternative text to a loading decoration. Add alt only when the real thumbnail or fallback represents the resource.

Anchor to Migration exampleMigration example

Migrating SkeletonThumbnail

export function SkeletonThumbnailMigrationExample() {

return (

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

);

}

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

export function SkeletonThumbnailMigrationExample() {

return (

);

}

Polaris web components

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

Polaris React

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


export function SkeletonThumbnailMigrationExample() {

  return (
    <SkeletonThumbnail size="large" />
  );
}

Preview

Anchor to Test and remove Polaris ReactTest and remove Polaris React

Test cached, slow, missing, and failed images.
Verify list and table rows don't jump when the thumbnail loads.
Remove SkeletonThumbnail only after loading and error outcomes both terminate correctly.

Was this page helpful?