Skeleton

Skeleton Loader React Component: Enhance perceived performance and reduce loading anxiety with this customizable component.

Components:

Skeleton SkeletonAvatar SkeletonText SkeletonButton SkeletonBox

Type

Components

import

import { Skeleton } from '@pillar-ui/core'
Go To skeleton Source CodeIssuesdiscussions

Usage

import { Skeleton } from '@pillar-ui/core'
<Skeleton />

Examples

Avatar

Avatar Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
'use client'

import { Avatar, Flex, SkeletonAvatar } from '@pillar-ui/core'
import { Meta } from '@storybook/react'

export const SkeletonAvatarSize = () => {
  return (
    <Flex items="center" gap="5">
      <SkeletonAvatar size="1" isLoading={true}>
        <Avatar size="1" variant="image" title="Hello" />
      </SkeletonAvatar>
      <SkeletonAvatar size="2" isLoading={true}>
        <Avatar size="2" variant="image" title="Hello" />
      </SkeletonAvatar>
      <SkeletonAvatar size="3" isLoading={true}>
        <Avatar size="3" variant="image" title="Hello" />
      </SkeletonAvatar>
      <SkeletonAvatar size="4" isLoading={true}>
        <Avatar size="4" variant="image" title="Hello" />
      </SkeletonAvatar>
      <SkeletonAvatar size="5" isLoading={true}>
        <Avatar size="5" variant="image" title="Hello" />
      </SkeletonAvatar>
      <SkeletonAvatar size="7" isLoading={true}>
        <Avatar size="7" variant="image" title="Hello" />
      </SkeletonAvatar>
      <SkeletonAvatar size="8" isLoading={true}>
        <Avatar size="8" variant="image" title="Hello" />
      </SkeletonAvatar>
      <SkeletonAvatar size="9" isLoading={true}>
        <Avatar size="9" variant="image" title="Hello" />
      </SkeletonAvatar>
    </Flex>
  )
}

//

Avatar Corner

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
import { Avatar, Flex, Skeleton, SkeletonAvatar } from '@pillar-ui/core'
import { Meta } from '@storybook/react'

const meta: Meta<typeof Skeleton> = {
  title: 'Components/Skeleton',
  component: Skeleton,
}

export default meta

export const SkeletonAvatarCorner = () => {
  return (
    <Flex items="center" gap="5">
      <SkeletonAvatar corner="1" isLoading>
        <Avatar size="1" variant="image" title="Hello" />
      </SkeletonAvatar>
      <SkeletonAvatar corner="2" isLoading>
        <Avatar size="2" variant="image" title="Hello" />
      </SkeletonAvatar>
      <SkeletonAvatar corner="3" isLoading>
        <Avatar size="3" variant="image" title="Hello" />
      </SkeletonAvatar>
      <SkeletonAvatar corner="4" isLoading>
        <Avatar size="4" variant="image" title="Hello" />
      </SkeletonAvatar>
      <SkeletonAvatar corner="5" isLoading>
        <Avatar size="5" variant="image" title="Hello" />
      </SkeletonAvatar>
      <SkeletonAvatar corner="circle" isLoading>
        <Avatar size="7" variant="image" title="Hello" />
      </SkeletonAvatar>
      <SkeletonAvatar corner="full" isLoading>
        <Avatar size="8" variant="image" title="Hello" />
      </SkeletonAvatar>
    </Flex>
  )
}

//

Text

TextSize

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
import { Flex, Text, SkeletonText } from '@pillar-ui/core'

const SIZES = Array.from({ length: 9 }, (_, index) => `${index + 1}`) as ['1', '2', '3', '4', '5', '6', '7', '8', '9']

export const SkeletonTextSize = () => {
  return (
    <>
      {SIZES.map((i) => (
        <SkeletonText key={i} size={i} isLoading={true} lines={3}>
          <Text size="3">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, repellendus rerum enim nostrum reiciendis sed
            rem quo autem recusandae praesentium dicta, totam corrupti nisi vel vitae odio quam repudiandae nemo?
          </Text>
        </SkeletonText>
      ))}
    </>
  )
}

Lines

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
import { Flex, Text, SkeletonText } from '@pillar-ui/core'

export const SkeletonTextLines = () => {
  return (
    <>
      <SkeletonText size="3" isLoading={true} lines={3}>
        <Text size="3">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, repellendus rerum enim nostrum reiciendis sed
          rem quo autem recusandae praesentium dicta, totam corrupti nisi vel vitae odio quam repudiandae nemo?
        </Text>
      </SkeletonText>
      <SkeletonText size="3" isLoading={true} lines={3.5}>
        <Text size="3">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, repellendus rerum enim nostrum reiciendis sed
          rem quo autem recusandae praesentium dicta, totam corrupti nisi vel vitae odio quam repudiandae nemo?
        </Text>
      </SkeletonText>
      <SkeletonText size="3" isLoading={true} lines={2.3}>
        <Text size="3">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, repellendus rerum enim nostrum reiciendis sed
          rem quo autem recusandae praesentium dicta, totam corrupti nisi vel vitae odio quam repudiandae nemo?
        </Text>
      </SkeletonText>
      <SkeletonText size="3" isLoading={true} lines={3.3}>
        <Text size="3">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, repellendus rerum enim nostrum reiciendis sed
          rem quo autem recusandae praesentium dicta, totam corrupti nisi vel vitae odio quam repudiandae nemo?
        </Text>
      </SkeletonText>
      <SkeletonText size="3" isLoading={true} lines={1.13}>
        <Text size="3">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, repellendus rerum enim nostrum reiciendis sed
          rem quo autem recusandae praesentium dicta, totam corrupti nisi vel vitae odio quam repudiandae nemo?
        </Text>
      </SkeletonText>
    </>
  )
}

Button

Size

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'
import { Button, Flex, SkeletonButton } from '@pillar-ui/core'

export const SkeletonButtonSize = () => {
  return (
    <>
      <SkeletonButton size="1" isLoading>
        <Button size="1">hello world</Button>
      </SkeletonButton>
      <SkeletonButton size="2" isLoading>
        <Button size="2">hello world</Button>
      </SkeletonButton>
      <SkeletonButton size="3" isLoading>
        <Button size="3">hello world</Button>
      </SkeletonButton>
      <SkeletonButton size="4" isLoading>
        <Button size="4">hello world</Button>
      </SkeletonButton>
      <SkeletonButton size="5" isLoading>
        <Button size="5">hello world</Button>
      </SkeletonButton>
      <SkeletonButton size="6" isLoading>
        <Button size="6">hello world</Button>
      </SkeletonButton>
      <SkeletonButton size="7" isLoading>
        <Button size="7">hello world</Button>
      </SkeletonButton>
      <SkeletonButton size="8" isLoading>
        <Button size="8">hello world</Button>
      </SkeletonButton>
      <SkeletonButton size="9" isLoading>
        <Button size="9">hello world</Button>
      </SkeletonButton>
    </>
  )
}

Box

Height

import { Skeleton } from '@pillar-ui/core'

export const SkeletonBoxHeight = () => {
  return (
    <>
      <Skeleton height="300px" isLoading={true}>
        <img src="https://picsum.photos/id/300/300/300" alt="" />
      </Skeleton>
      <Skeleton height="200px" isLoading={true}>
        <img src="https://picsum.photos/id/300/300/200" alt="" />
      </Skeleton>
      <Skeleton height="150px" isLoading={true}>
        <img src="https://picsum.photos/id/300/300/150" alt="" />
      </Skeleton>
      <Skeleton height="450px" isLoading={true}>
        <img src="https://picsum.photos/id/300/300/450" alt="" />
      </Skeleton>
    </>
  )
}

previous

Separator

next

Spinner