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.

Skeleton thumbnail component examples

Use this component to represent medium thumbnails.

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

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


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.

    On this page