Skeleton

The Skeleton component is a versatile component designed to act as a placeholder while content is loading or before the content is available. It provides visual feedback and reduces the perceived loading time for users, improving the overall user experience. It is inspired by the Material-UI skeleton component and can be used in various scenarios such as text, cards, and images.

Importing

import { Skeleton } from '@ef-global/backpack/Skeleton';

Props

Name	Type	Default	Description
variant	`SkeletonVariant`	'text'	Defines the shape of the skeleton: 'circular', 'rectangular', or 'text'.
animate	`boolean`	true	Determines whether the skeleton should have a pulsing animation effect.
height	`string`		Sets the height of the skeleton.
width	`string`		Sets the width of the skeleton.
className	`string`		Custom CSS class name for the skeleton.
children	`React.ReactNode`		Child elements to be rendered within the skeleton component.

Usage

Here are some examples of the Skeleton component in use:

With Text

header1

header2

header3

header4

header5

header6

body

bodySmall

<Text variant={'header1'}>
    <Skeleton />
</Text>
<Text variant={'header2'}>
    <Skeleton />
</Text>
<Text variant={'header3'}>
    <Skeleton />
</Text>
<Text variant={'header4'}>
    <Skeleton />
</Text>
<Text variant={'header5'}>
    <Skeleton />
</Text>
<Text variant={'header6'}>
    <Skeleton />
</Text>
<Text variant={'body'}>
    <Skeleton />
</Text>
<Text variant={'bodySmall'}>
    <Skeleton />
</Text>

With Content Card

Lorem ipsum dolor sit amet, consetetu.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.

<ContentCard href='' shadow='off'>
    <Skeleton
        style={{ paddingTop: '56.25%' }}
        variant='rectangular'
        data-slot='CardImage'
    />
    <Skeleton
        style={{
            flex: '1',
            maxWidth: '70%',
        }}
        data-slot='CardTitle' />
    <div data-slot='CardBody'>
        <Skeleton style={{ maxWidth: '100%' }} />
        <Skeleton style={{ maxWidth: '30%' }} />
    </div>
</ContentCard>

With Teaser Card

<TeaserCard className={styles.teaserCardSkeleton} href='' shadow='off'>
    <Skeleton
        style={{ paddingTop: '56.25%' }}
        variant='rectangular'
        data-slot='CardImage'
    />
    <Skeleton
        style={{
            flex: '1',
            backgroundColor: 'hsl(0, 0%, 95%)',
            maxWidth: '80%',
        }}
        animate={false}
        data-slot='CardTitle'
    />
    <div data-slot='CardBody'>
        <Skeleton style={{ maxWidth: '100%' }} />
        <Skeleton style={{ maxWidth: '30%' }} />
    </div>
</TeaserCard>

Position Layer SSRInjectStyles