Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

SkeletonText

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 a SkeletonText component as a base for the rendered skeleton

Support
Targets (50)

Supported targets

Anchor to SkeletonTextPropsSkeletonTextProps

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 SkeletonText to be used as a base for the rendered skeleton

Anchor to id
id
string

A unique identifier for the component.

Anchor to inlineSize
inlineSize
'small' | 'large' | 'base'

Adjust the length of the text when no children are passed.

Anchor to size
size

Size of the text the skeleton replaces.

Anchor to ExamplesExamples

Anchor to Basic SkeletonTextBasic SkeletonText

Basic SkeletonText

Example

Basic SkeletonText

import {
reactExtension,
SkeletonText,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return <SkeletonText />;
}
import {extension, SkeletonText} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
const skeletonText = root.createComponent(SkeletonText);

root.appendChild(skeletonText);
});

Anchor to 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.

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.

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>
);
};
import {
extension,
BlockStack,
View,
InlineLayout,
Image,
Icon,
Text,
SkeletonImage,
SkeletonText,
} from '@shopify/ui-extensions/checkout';

export default extension(
'purchase.checkout.block.render',
(root) => {
const source = 'https://yourawesomeimage.com';
const loading = true;
const [item1, item2] = [
{
title: 'Felipe Toledo WildFire',
variantTitle: 'Medium',
price: '$330.00',
},
{
title: 'Roller',
variantTitle: 'Medium',
price: '$248.00',
},
];
const thumbnail = root.createComponent(
View,
{
minBlockSize: 64,
cornerRadius: 'large',
maxInlineSize: 64,
minInlineSize: 64,
border: 'base',
},
[
source
? root.createComponent(Image, {
fit: 'cover',
aspectRatio: 1,
source,
cornerRadius: 'large',
})
: root.createComponent(
View,
{maxInlineSize: 33},
[
root.createComponent(Icon, {
source: 'camera',
size: 'fill',
}),
],
),
],
);
const itemInfo = ({title, variantTitle}) =>
root.createComponent(
BlockStack,
{
spacing: 'extraTight',
},
[
loading
? (root.createComponent(
SkeletonText,
{},
title,
),
root.createComponent(
SkeletonText,
{},
variantTitle,
))
: (root.createComponent(
Text,
{},
title,
),
root.createComponent(
Text,
{},
variantTitle,
)),
],
);
const order = (item) =>
root.createComponent(
InlineLayout,
{
columns: ['auto', 'fill', 'auto'],
spacing: 'base',
blockAlignment: 'center',
},
[
loading
? root.createComponent(
SkeletonImage,
{
blockSize: 64,
inlineSize: 64,
},
)
: thumbnail,
itemInfo(item),
loading
? root.createComponent(
SkeletonText,
{},
item.price,
)
: root.createComponent(
Text,
{},
item.price,
),
],
);
const view = root.createComponent(
View,
{
maxInlineSize: 400,
},
[
root.createComponent(BlockStack, {}, [
order(item1),
order(item2),
]),
],
);
root.appendChild(view);
},
);
Was this page helpful?