# 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
### Basic SkeletonText

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

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

function Extension() {
  return <SkeletonText />;
}

```

```js
import {extension, SkeletonText} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.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.
### Using skeleton loaders to prevent layout shifts on content load.

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

export default reactExtension(
  'purchase.checkout.block.render',
  () =&gt; &lt;LoadingStateSkeletons /&gt;,
);

export const Thumbnail = ({
  source = 'https://yourawesomeimage.com',
}) =&gt; (
  &lt;View
    minBlockSize={64}
    cornerRadius="large"
    maxInlineSize={64}
    minInlineSize={64}
    border="base"
  &gt;
    {source ? (
      &lt;Image
        fit="cover"
        aspectRatio={1}
        source={source}
        cornerRadius="large"
      /&gt;
    ) : (
      &lt;View maxInlineSize={33}&gt;
        &lt;Icon source="camera" size="fill" /&gt;
      &lt;/View&gt;
    )}
  &lt;/View&gt;
);
export const LoadingStateSkeletons = () =&gt; {
  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}) =&gt;
    loading ? (
      &lt;&gt;
        &lt;SkeletonText&gt;{title}&lt;/SkeletonText&gt;
        &lt;SkeletonText&gt;
          {variantTitle}
        &lt;/SkeletonText&gt;
      &lt;/&gt;
    ) : (
      &lt;&gt;
        &lt;Text emphasis="bold"&gt;{title}&lt;/Text&gt;
        &lt;Text appearance="subdued"&gt;
          {variantTitle}
        &lt;/Text&gt;
      &lt;/&gt;
    );
  const order = (item) =&gt; (
    &lt;InlineLayout
      columns={['auto', 'fill', 'auto']}
      spacing="base"
      blockAlignment="center"
    &gt;
      {loading ? (
        &lt;SkeletonImage
          blockSize={64}
          inlineSize={64}
        /&gt;
      ) : (
        &lt;Thumbnail /&gt;
      )}
      &lt;BlockStack spacing="extraTight"&gt;
        {itemInfo(item)}
      &lt;/BlockStack&gt;
      {loading ? (
        &lt;SkeletonText&gt;{item.price}&lt;/SkeletonText&gt;
      ) : (
        &lt;Text emphasis="bold"&gt;{item.price}&lt;/Text&gt;
      )}
    &lt;/InlineLayout&gt;
  );
  return (
    &lt;View maxInlineSize={400}&gt;
      &lt;BlockStack&gt;
        {order(item1)}
        {order(item2)}
      &lt;/BlockStack&gt;
    &lt;/View&gt;
  );
};

```

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

export default extension(
  'purchase.checkout.block.render',
  (root) =&gt; {
    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}) =&gt;
      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) =&gt;
      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);
  },
);

```