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.

Examples

Use this component to represent medium thumbnails.

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

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

Use this component to represent large thumbnails.

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

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

Use this component to represent small thumbnails.

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

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

Use this component to represent extra small thumbnails.

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

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

Props

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

size? Size
Size of the thumbnail

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.

Use this component with Skeleton display text to represent the content of a card while it’s loading.

Skeleton thumbnail

Examples

Props

Best practices

Related components