Components

Skeleton
Storybook

The Skeleton component in React is a tool to display a skeleton while loading dynamic content. Provides a rough visual representation of the structure of the elements to be loaded, improving the user experience. It is commonly used in situations where slow loading of content is expected.

Imports

The first alternative is recommended since they can reduce the application bundle

1import Skeleton from 'dd360-ds/Skeleton'

1import { Skeleton } from 'dd360-ds'

Usage

Use the Skeleton component as shown below:

The code snippet below shows how to use the Skeleton component:

1import  Skeleton  from 'dd360-ds/Skeleton'
2
3<Skeleton color="#cfcfcf" height={30} width={200} />
4

Animation

With the prop animation you can control the animation of Skeleton

1import { Flex, Skeleton } from 'dd360-ds''
2
3<Flex gap="4">
4  <Skeleton animation="false" color="#cfcfcf" width={200} height={30} rounded="2xl" />
5  <Skeleton animation="pulse" color="#cfcfcf" width={200} height={30} rounded="2xl" />
6  <Skeleton animation="wave" color="#cfcfcf" width={200} height={30} rounded="2xl" />
7</Flex>
8

Rounded

With the prop rounded you can customize the rounded edge of the skeleton

1import { Flex, Skeleton }from 'dd360-ds''
2
3<Flex gap="4">
4  <Skeleton color="#cfcfcf" width={200} height={30} rounded="none" />
5  <Skeleton color="#cfcfcf" width={200} height={30} rounded="base" />
6  <Skeleton color="#cfcfcf" width={200} height={30} rounded="sm" />
7  <Skeleton color="#cfcfcf" width={200} height={30} rounded="md" />
8  <Skeleton color="#cfcfcf" width={200} height={30} rounded="lg" />
9  <Skeleton color="#cfcfcf" width={200} height={30} rounded="xl" />
10  <Skeleton color="#cfcfcf" width={200} height={30} rounded="2xl" />
11  <Skeleton color="#cfcfcf" width={200} height={30} rounded="3xl" />
12  <Skeleton color="#cfcfcf" width={200} height={30} rounded="full" />
13</Flex>
14

Color

With the prop color you can customize the color of the skeleton

1import Skeleton from 'dd360-ds/Skeleton''
2
3<Skeleton color="#74a9e6" width={200} height={30} rounded="2xl" />
4

Table Content Skeleton

With the component TableContentSkeleton you can display a skeleton table content with mock rows and columns to represent data in a tabular structure.

Col 1	Col 2	Col 3	Col 4

1import { Table, TableContentSkeleton } from 'dd360-ds'
2
3<TableContentSkeleton
4  rows={10}
5  columns={7}
6  rounded="full"
7  skeletonHeight={10}
8  classNameCell="px-4 border"
9  skeletonWidth={[150, 150, 75, 40, 40, 100, 80]}
10  skeletonClass="m-auto"
11  skeletonColor="#e5e7eb"
12/>
13

API Reference

Name	Types	Default
"animation"	false pulse wave	pulse
"rounded"	none base sm md lg xl 2xl 3xl full	lg
"height"	string	-
"width"	string	-
"className"	string	-
"style"	CSSProperties	-
"children"	ReactNode	-

Note

This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.

BarListTable