Skeleton
SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page.
Anchor to skeletonimagepropsSkeletonImageProps
Anchor to aspectRatio
aspectRatio
number
Displays the skeleton at the specified aspect ratio (fills the width of the parent container and sets the height accordingly).
Anchor to blockSize
blockSize
<number | `${number}%` | 'fill'>
Adjust the block size of the skeleton.
string
A unique identifier for the component.
Anchor to inlineSize
inlineSize
<number | `${number}%` | 'fill'>
Adjust the inline size of the skeleton.
Was this section helpful?
Basic SkeletonImage
import {
reactExtension,
SkeletonImage,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
return (
<SkeletonImage
inlineSize={300}
blockSize={300}
/>
);
}
Preview
Anchor to examplesExamples
Anchor to example-using-skeleton-loaders-to-prevent-layout-shifts-on-content-load.Using skeleton loaders to prevent layout shifts on content load.
When adding content to a layout, incorporate a skeleton loader that renders the approximate size and position of the content during loading. This will provide a seamless transition from skeleton loaders to the content, and prevent any layout shift when the resulting content loads.
Was this section helpful?
Using skeleton loaders to prevent layout shifts on content load.
import {
reactExtension,
View,
BlockStack,
InlineLayout,
SkeletonImage,
Image,
Icon,
SkeletonText,
Text,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <LoadingStateSkeletons />,
);
export const ProductThumbnail = ({
source = 'https://yourawesomeimage.com',
}) => (
<View
minBlockSize={64}
cornerRadius="large"
maxInlineSize={64}
minInlineSize={64}
border="base"
>
{source ? (
<Image
fit="cover"
aspectRatio={1}
source={source}
cornerRadius="large"
/>
) : (
<View maxInlineSize={33}>
<Icon source="camera" size="fill" />
</View>
)}
</View>
);
export const LoadingStateSkeletons = () => {
const loading = true;
const [item1, item2] = [
{
title: 'Felipe Toledo WildFire',
variantTitle: 'Medium',
price: '$330.00',
},
{
title: 'Roller',
variantTitle: 'Medium',
price: '$248.00',
},
];
const itemInfo = ({title, variantTitle}) =>
loading ? (
<>
<SkeletonText>{title}</SkeletonText>
<SkeletonText>
{variantTitle}
</SkeletonText>
</>
) : (
<>
<Text emphasis="bold">{title}</Text>
<Text appearance="subdued">
{variantTitle}
</Text>
</>
);
const order = (item) => (
<InlineLayout
columns={['auto', 'fill', 'auto']}
spacing="base"
blockAlignment="center"
>
{loading ? (
<SkeletonImage
blockSize={64}
inlineSize={64}
/>
) : (
<ProductThumbnail />
)}
<BlockStack spacing="extraTight">
{itemInfo(item)}
</BlockStack>
{loading ? (
<SkeletonText>{item.price}</SkeletonText>
) : (
<Text emphasis="bold">{item.price}</Text>
)}
</InlineLayout>
);
return (
<View maxInlineSize={400}>
<BlockStack>
{order(item1)}
{order(item2)}
</BlockStack>
</View>
);
};
Preview
