Skeleton

• Web
• Native

Reference

The Skeleton component display´s a preview of a content right before the data is loaded. Using this component you can reducing the user perception of slow loading since your component data may not be immediately available. With it the data is shown incrementally on the screen.

With this resourse available we sugest that you avoit the use of Progress components (spiners).

Circular

import { Skeleton } from '@gympass/yoga';

<Skeleton type="circular" width={48} height={48} />
<Skeleton type="circular" width={48} height={48} />

Rectangular

import { Skeleton } from '@gympass/yoga';

<Skeleton type="rectangular" width={400} height={200} />
<Skeleton type="rectangular" width={400} height={200} />

Text

import { Skeleton } from '@gympass/yoga';

<Skeleton type="text" variant="h1" width={500} />
<Skeleton type="text" variant="h1" width={500} />

The text type can receive a prop called variant, that can be one of the following values:

• h1 - 56px height;
• h2 - 48px height;
• h3 - 40px height;
• h4 - 32px height;
• h5 - 28px height;
• body1 - 24px height;
• body2 - 20px height;
• overline - 16px height;
• exception - 12px height;

Background

import { Skeleton } from '@gympass/yoga';

<Skeleton type="text" variant="h1" width={500} color="secondary"/>
<Skeleton type="text" variant="h1" width={500} color="secondary"/>

Props