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.
    πŸ‘‹

    We've made some improvements to our website to help you build more efficiently with Polaris.