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.
Related components
- Use this component with Skeleton display text to represent the content of a card while itβs loading.