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

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

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

function Extension() {
  return ;
}

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

extend('Checkout::Dynamic::Render', (root) => {
  const skeletonText = root.createComponent(SkeletonText);

  root.appendChild(skeletonText);
});

SkeletonTextProps

SkeletonTextProps

emphasis

inlineSize

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

size

Size of the text the skeleton replaces.

id

A unique identifier for the component.

Size

'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'

TextSize

Extract<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge'> | 'medium'

Examples

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

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);
});