PolarisSkeleton 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" />;
}Props
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.
Related components
- Use this component with Skeleton display text to represent the content of a card while it’s loading.