SkeletonImage

SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page.

import {render, SkeletonImage} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => );

function Extension() {
  return ;
}

import {extend, SkeletonImage} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::Render', (root) => {
  const skeletonImage = root.createComponent(SkeletonImage, {
    inlineSize: 300,
    blockSize: 300,
  });

  root.appendChild(skeletonImage);
});

SkeletonImageProps

SkeletonImageProps

blockSize

Adjust the block size of the skeleton.

inlineSize

Adjust the inline size of the skeleton.

aspectRatio

Displays the skeleton at the specified aspect ratio (fills the width of the parent container and sets the height accordingly).

id

A unique identifier for the component.

MaybeResponsiveConditionalStyle

A type that represents a value that can be a conditional style. The conditions are based on the viewport size. We highly recommend using the `Style` helper which simplifies the creation of conditional styles. To learn more check out the [conditional styles](/api/checkout-ui-extensions/components/utilities/stylehelper) documentation.

T | ConditionalStyle<T, ViewportSizeCondition>

ConditionalStyle

default

The default value applied when none of the conditional values specified in `conditionals` are met.

conditionals

An array of conditional values.

ConditionalValue

conditions

The conditions that must be met for the value to be applied. At least one condition must be specified.

value

The value that will be applied if the conditions are met.

ViewportSizeCondition

viewportInlineSize

ViewportInlineSize

'small' | 'medium' | 'large'

Examples

SkeletonImage is used to provide a low fidelity representation of an image before it appears on the page.

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.

import React from 'react';
import {
  render,
  View,
  BlockStack,
  InlineLayout,
  SkeletonImage,
  Image,
  Icon,
  SkeletonText,
  Text,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => (
  
));

export const Thumbnail = ({
  source = 'https://yourawesomeimage.com',
}) => (
  
    {source ? (
      
    ) : (
      
        
      
    )}
  
);
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 ? (
      <>
        {title}
        
          {variantTitle}
        
      
    ) : (
      <>
        {title}
        
          {variantTitle}
        
      
    );
  const order = (item) => (
    
      {loading ? (
        
      ) : (
        
      )}
      
        {itemInfo(item)}
      
      {loading ? (
        {item.price}
      ) : (
        {item.price}
      )}
    
  );
  return (
    
      
        {order(item1)}
        {order(item2)}
      
    
  );
};

import {
  extend,
  BlockStack,
  View,
  InlineLayout,
  Image,
  Icon,
  Text,
  SkeletonImage,
  SkeletonText,
} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::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);
});

import React from 'react';
import {
  render,
  View,
  BlockStack,
  InlineLayout,
  SkeletonImage,
  Image,
  Icon,
  SkeletonText,
  Text,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => (
  
));

export const Thumbnail = ({
  source = 'https://yourawesomeimage.com',
}) => (
  
    {source ? (
      
    ) : (
      
        
      
    )}
  
);
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 ? (
      <>
        {title}
        
          {variantTitle}
        
      
    ) : (
      <>
        {title}
        
          {variantTitle}
        
      
    );
  const order = (item) => (
    
      {loading ? (
        
      ) : (
        
      )}
      
        {itemInfo(item)}
      
      {loading ? (
        {item.price}
      ) : (
        {item.price}
      )}
    
  );
  return (
    
      
        {order(item1)}
        {order(item2)}
      
    
  );
};

import {
  extend,
  BlockStack,
  View,
  InlineLayout,
  Image,
  Icon,
  Text,
  SkeletonImage,
  SkeletonText,
} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::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);
});