Skeleton

import {Skeleton, Image, Heading, Text} from '@react-spectrum/s2'
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
import preview from 'url:./assets/preview.png';
import Select from '@react-spectrum/s2/icons/Select';

<Skeleton isLoading>
  <div className={style({display: 'flex', gap: 16})}>
    <Image
      src={preview}
      width={1600}
      height={1200}
      styles={style({height: 160, borderRadius: 'default', flexShrink: 0})} />
    <div className={style({display: 'flex', flexDirection: 'column', gap: 16})}>
      <Text styles={style({font: 'heading-lg'})}>Placeholder title</Text>
      <Text styles={style({font: 'body'})}>This is placeholder content approximating the length of the real content to avoid layout shifting when the real content appears.</Text>
      <div className={style({display: 'flex', gap: 4, alignItems: 'center'})}>
        <Select />
        <Text styles={style({font: 'ui'})}>Here is an icon.</Text>
      </div>
    </div>
  </div>
</Skeleton>