Skip to content
Vy logo
  • Spor
  • Resources
Components

Skeletons

Skeletons are loading placeholder components that let you emulate the loaded product.

FigmaGitHub

Code examples

<Stack width="100%">
  <Skeleton height="6" />
  <Skeleton height="6" />
  <Skeleton height="6" />
</Stack>

Guidelines

Skeleton states are simplified versions of components used as placeholders before content has finished loading. They should only be visible for a few seconds before the content is displayed and should always have the same dimensions and size as the content they replaced. This is to ensure that the content doesn't jump or change in character once it has finished loading.

Use skeletons when content or data is fetched externally and causes longer wait times, or when loading more than one element where it's not natural to use other forms of loading indicators.

Modals can use skeleton states for content, but should never be used to represent the modal itself (applies to dialogs, drawers, overflow, and dropdowns/expandables). Avoid using skeletons for longer processes that require downloading/uploading content. Avoid using skeletons if the process is fast or can be solved with inline-loading.

You have access to three different building blocks – Skeleton, SkeletonCircle, and SkeletonText. Together, these can resemble many common user interfaces in Spor.

Code

<Skeleton />

import { Skeleton } from "@vygruppen/spor-react";

Generic skeleton rectangle

Props

Name
Type
Required?
Description
loadingbooleanRenders skeleton if true. Renders the children if false. Defaults to true.
childrenReact.ReactNodeContent to show if isLoaded is true
variantstring"pulse" | "shine" | "none" Defaults to "pulse".

<SkeletonCircle />

import { SkeletonCircle } from "@vygruppen/spor-react";

A round skeleton loader

Props

Name
Type
Required?
Description
sizenumberThe size of the circle

<SkeletonText />

import { SkeletonText } from "@vygruppen/spor-react";

A placeholder for a number of lines of text

Props

Name
Type
Required?
Description
noOfLinesnumberThe number of lines of placeholder text