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

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

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

function Extension() {
  return (
    <SkeletonImage
      inlineSize={300}
      blockSize={300}
    />
  );
}

```

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

export default extension('purchase.checkout.block.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.
### 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);
  },
);

```