Skip to contentShopify logoPolaris

Skeleton thumbnail

Skeleton thumbnail is used to provide a low fidelity representation of an image before it appears on the page, and improves load times perceived by merchants. Use for thumbnails in or outside of a card.

Use this component to represent medium thumbnails.

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

function SkeletonExample() {
  return <SkeletonThumbnail size="medium" />;
}

Props

Want to help make this feature better? Please share your feedback.

interface SkeletonThumbnailProps
size?'extraSmall' | 'small' | 'medium' | 'large'

Size of the thumbnail.

Defaults to 'medium'.

Best practices

Skeleton thumbnail component should:

  • Try to match the size of the thumbnail to the content being loaded so it gives an accurate representation.