---
title: Migrate SkeletonImage
description: >-
  Learn about the removal of the SkeletonImage component in checkout and
  customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/skeleton-image
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/skeleton-image.md
---

# Migrate SkeletonImage

The `SkeletonImage` component has been removed and does not have a direct replacement in Polaris web components. The previous [`SkeletonImage`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/skeletonimage) component is no longer available in API versions 2025-10 and newer.

***

## Migration options

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

### Use the Image component directly

The [`<s-image>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media/image) component handles its own loading state. Render `<s-image>` directly; it shows its own placeholder while the source resolves.

## Replacing SkeletonImage with the Image component

##### Latest (Preact)

```tsx
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>
  );
}
```

##### Pre-Polaris (2025-07)

```tsx
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" />;
}
```

***

## Updated 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.

***