@squiz/xaccel-skeleton-loading v1.15.2

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

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