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