Skeleton LoaderPlaceholder preview while content loads.

Skeleton

import Skeleton from '@/components/Skeleton';
export function Example() {  return <Skeleton />;}

Skeleton ($type="text")

import Skeleton from '@/components/Skeleton';
export function Example() {  return (    <>      <Skeleton $type="text" />      <Skeleton $type="text" />      <Skeleton $type="text" />    </>  );}

Skeleton ($type="rect")

import Skeleton from '@/components/Skeleton';
export function Example() {  return (    <>      <Skeleton $type="rect" />      <Skeleton $type="rect" $width="60%" />      <Skeleton $type="rect" $width="200px" />    </>  );}

Skeleton ($type="circle")

import Skeleton from '@/components/Skeleton';
export function Example() {  return (    <>      <Skeleton $type="circle" />      <Skeleton $type="circle" $width="40px" />      <Skeleton $type="circle" $width="80px" />    </>  );}

Skeleton (lorem content)

import Skeleton from '@/components/Skeleton';import Text from '@/components/Text';
export function Example() {  return (    <>      <Text style={{ display: 'flex', gap: '12px', alignItems: 'flex-start' }}>        <Skeleton $type="circle" $width="48px" />        <Text style={{ flex: 1 }}>          <Skeleton $type="text" />          <Skeleton $type="text" />          <Skeleton $type="text" />        </Text>      </Text>      <Skeleton $type="rect" $width="100%" />    </>  );}