@finastra/skeleton NPM

Skeleton

Skeleton componet used to indicate content and ui loading that will appear after its loaded. It helps to decrease perceived duration time

npm i @finastra/skeleton

import '@finastra/skeleton';
...
<fds-skeleton></fds-skeleton>

Property	Attribute	Type	Default	Description
`height`	`height`	`string`		Height of the skeleton
`override`
`size`	`size`	`h1\\|h2\\|h3\\|h4\\|h5\\|h6\\|small\\|p`	"p"	Define the size of skeleton
`type`	`type`	`circle\\|text\\|rectangle`	"text"	Define the type of skeleton
`width`	`width`	`string`		Width of the skeleton

Method	Type
`updateHeight`	`(): void`
`updateWidth`	`(): void`
`willUpdate`	`(_changedProperties: Map<string \\| number \\| symbol, unknown> \\| PropertyValueMap<any>): void`

Property	Default	Description
`--fds-skeleton-background`	"var(--fds-surface-selected)"	Background color of the skeleton.
`--fds-skeleton-height`	"162px"	Width of the skeleton
`--fds-skeleton-placeholder-color`	"var(--fds-on-surface-medium)"	Color of placeholder.
`--fds-skeleton-width`	"162px"	Height of the skeleton