@squiz/xaccel-skeleton-loading

SkeletonLoading

Description

The SkeletonLoading component is a versatile and user-friendly UI element designed to enhance the user experience during data loading periods. It provides a visual placeholder that mimics the structure of the content being loaded, offering a seamless transition and reducing perceived loading times.

Properties

Property	Property description	Property type	Default value	Is required
width	width	string or number	100%
height	height	string or number	1rem
borderRadius	The border radius style	string or number	0.25rem
style	Additional styles to add to element	CSSProperties
className	Overwrite ClassName	classNameOverride

Usage

Default

import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';

<SkeletonLoading />

Custom size

import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';

<SkeletonLoading  width={150} height={30} />

Circle

import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';

<SkeletonLoading type='circle' width={50} height={50} />

Additional styles

import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';

<SkeletonLoading style={{ borderRadius: 10 }}/>

Additional class

import { SkeletonLoading } from '@squiz/xaccel-skeleton-loading';

<SkeletonLoading
    className={{
        className: 'item',
        cssModule: styles,
        retainMissingModuleClasses: true,
    }} />

For more information about className please visit packages/utility/functions/src/generateClasses.js