Migrate SkeletonImage

The SkeletonImage component has been removed and does not have a direct replacement in Polaris web components. The previous SkeletonImage component is no longer available in API versions 2025-10 and newer.

Anchor to Migration optionsMigration options

If you were using SkeletonImage as a placeholder while images load, consider the following alternatives:

Anchor to Use the Image component directlyUse the Image component directly

The <s-image> component handles its own loading state. Render <s-image> directly; it shows its own placeholder while the source resolves.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const imageUrl = useImageUrl();

  return (
    <s-box inlineSize="100px" blockSize="100px">
      <s-image src={imageUrl} alt="Product image" />
    </s-box>
  );
}

import {
  reactExtension,
  SkeletonImage,
  Image,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const imageUrl = useImageUrl();

  if (!imageUrl) {
    return <SkeletonImage inlineSize={100} blockSize={100} />;
  }

  return <Image source={imageUrl} accessibilityDescription="Product image" />;
}

Anchor to Updated patternsUpdated patterns

Before looking for a skeleton replacement, consider whether you still need one:

• Automatic skeletons: Shopify now automatically displays skeleton loading states when your app extension is loading. These provide a generic placeholder that roughly matches the size of your extension, so you might not need to manage skeletons manually.
• Let <s-image> handle its own loading: The component displays a placeholder while the source resolves, so you rarely need a separate skeleton.
• Skeleton only the loading content: Skeleton only the piece of content that's loading, not the entire UI.