Skeleton

Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.

The data for your components might not be immediately available. You can improve the perceived responsiveness of the page by using skeletons. It feels like things are happening immediately, then the information is incrementally displayed on the screen.

Basic Skeleton

Preview

Usage

The component is designed to be used directly in your components. For instance:


import { Skeleton } from 'archi-ui'


{item ? (
  <img alt={item.title} src={item.src} className='w-54 h-64' />
  ) : (
    <Skeleton variant='rectangular' className='w-54 h-64' />
  )
}

Variants

The component suppots 4 shape variants:

— text(default): represents a single line of text (you can adjust the height and width via className).

— circular, rectangular, rounded: come with different boder radius to let you take control of the size.

Preview

Animation

By default, the skeleton pulsates, but you can change the animation to a wave or disable it by pass value as none.

Preview

Pulsate Example

Preview

Don Diablo @ Tomorrowland Main Stage 2019 | Official…

Don Diablo396k views • a week ago

Queen - Greatest Hits

Queen Official40M views • 3 years ago

Calvin Harris, Sam Smith - Promises (Official Video)

Calvin Harris130M views • 10 months ago

code


import React from 'react';
import { Skeleton, Typography } from 'archi-ui';
 
const data = [
  {
    src: '/tomorrowland.webp',
    title: 'Don Diablo @ Tomorrowland Main Stage 2019 | Official…',
    channel: 'Don Diablo',
    views: '396k views',
    createdAt: 'a week ago',
  },
  {
    src: '/promises.webp',
    title: 'Queen - Greatest Hits',
    channel: 'Queen Official',
    views: '40M views',
    createdAt: '3 years ago',
  },
  {
    src: '/promises.webp',
    title: 'Calvin Harris, Sam Smith - Promises (Official Video)',
    channel: 'Calvin Harris',
    views: '130M views',
    createdAt: '10 months ago',
  },
];
 
function Media(props) {
  const { loading = false } = props;
 
  return (
    <div className='flex justify-center flex-nowrap'>
      {(loading ? Array.from(new Array(3)) : data).map((item, index) => (
        <div key={index} style={{ width: '210px' }} className='mr-0.5 my-5'>
          {item ? (
            <img
              style={{ width: '210px', height:'118px' }}
              alt={item.title}
              src={item.src}
            />
          ) : (
            <Skeleton variant='rectangular' style={{ width: '210px', height:'118px' }} />
          )}
          {item ? (
            <div className='pr-2'>
              <Typography gutterBottom variant="body2">
                {item.title}
              </Typography>
              <Typography
                variant="caption"
                className='block text-secondary'
              >
                {item.channel}
              </Typography>
              <Typography variant="caption" className='text-secondary'>
                {`${item.views} • ${item.createdAt}`}
              </Typography>
            </div>
          ) : (
            <div className='flex flex-col pt-5 gap-2'>
              <Skeleton />
              <Skeleton className='w-1/2' />
            </div>
          )}
        </div>
      ))}
    </div>
  );
}
 
export default function PulsateExample() {
  return (
    <div className='overflow-hidden'>
      <Media loading={true} />
      <Media />
    </div>
  );
}

Wave Example

Preview

Ted

5 hours ago

Why First Minister of Scotland Nicola Sturgeon thinks GDP is the wrong measure of a country's success:

code


import React from 'react';
import { Skeleton, Typography } from 'archi-ui';
import { MoreVertical } from 'lucide-react';
 
function Media(props) {
  const { loading = false } = props;
 
  return (
    <Card style={{ width: '345px' }} className='m-2'>
      <CardHeader
        avatar={
          loading ? (
            <Skeleton animation="wave" variant="circular" style={{ width: "40px", height: "40px" }} />
          ) : (
            <Avatar
              alt="Ted talk"
              src="/ted-talks.jpg"
            />
          )
        }
        action={
          loading ? null : (
            <IconButton>
              <MoreVertical />
            </IconButton>
          )
        }
        title={
          loading ? (
            <Skeleton
              animation="wave"
              style={{ width: "80%", height: "10px" }}
              className='mb-2'
            />
          ) : (
            'Ted'
          )
        }
        subheader={
          loading ? (
            <Skeleton animation="wave" style={{ width: "40%", height: "10px" }} />
          ) : (
            '5 hours ago'
          )
        }
      />
      {loading ? (
        <Skeleton style={{ height: '190px' }} animation="wave" variant="rectangular" />
      ) : (
        <img
          height="140px"
          src="/nicola-sturgeon.jpg"
          alt="Nicola Sturgeon on a TED talk stage"
        />
      )}
      <CardContent>
        {loading ? (
          <React.Fragment>
            <Skeleton animation="wave" style={{ height: '10px', marginBottom: '6px' }} />
            <Skeleton animation="wave" style={{ width: "80%", height: "10px" }} />
          </React.Fragment>
        ) : (
          <Typography>
            Why First Minister of Scotland Nicola Sturgeon thinks GDP is the wrong measure of a country's success:
          </Typography>
        )}
      </CardContent>
    </Card>
  );
}
 
export default function WaveExample() {
  return (
    <div>
      <Media loading={true} />
      <Media />
    </div>
  );
}

Skeleton API

API reference docs for the React Skeleton component.

Props

Name	Type	Default	Description
className	`string`	-	Override or extend the styles applied to the component
animation	`'pulse' \| 'wave' \| 'none'`	`'pulse'`	The animation. If `false` the animation effect is disabled.
variant	`'circular' \| 'rectangular' \| 'rounded' \| 'text'`	`'text'`	The type of content that will be rendered.