Skeleton Text
SkeletonText is used to provide a low fidelity representation of text content before it appears on the page.
Optionally you can use any text content inside to be used as a base for the rendered skeleton
Anchor to skeletontextpropsSkeletonTextProps
string
A unique identifier for the component.
Anchor to inlineSize
inlineSize
Extract<, 'small' | 'base' | 'large'>
Adjust the length of the text when no children are passed.
Anchor to size
size
Size of the text the skeleton replaces.
Was this section helpful?
Basic SkeletonText
import {
reactExtension,
SkeletonText,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
return <SkeletonText />;
}
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
