Skeleton

Набор компонентов для создания скелетов загрузки (плейсхолдеров).

Storybook

LineSkeleton​

Live Editor
Result
Open in CodeSandbox

RectSkeleton​

Live Editor
Result
Open in CodeSandbox

TextSkeleton​

Live Editor
Result
Open in CodeSandbox

На примере карточки​

Live Editor
Result
Open in CodeSandbox

Доступность​

При использование хока withSkeleton необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:

import React, { useState } from 'react';
import { Button } from '@salutejs/plasma-web';

const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(BasicButton);

export default function App () {
    const [skeleton, setSkeleton] = useState(false);

    return (
        <ButtonSkeleton
            type="button"
            text={skeleton ? 'Загрузка' : 'Нажмите'}
            skeleton={skeleton}
            aria-busy={skeleton}
            onClick={() => setSkeleton((prevValue) => !prevValue)}
        />
    );
}

Таким образом, при skeleton=true и aria-busy=true скринридер будет оповещать о соответствующем статусе компонента.