Skeleton loading is an UX pattern based on showing a preview of a page while the actual content is loading, usually in form of grey shapes and boxes that composed simulate what will be presented in the page after loading. This group of components allow you to build a skeleton of the page that you want to reporduce and display it while data is being fetched.
Component Structure
Skeleton.Loader
A basic skeleton element that can be shaped in the way needed to represent any ui element.
Skeleton.Heading
Represents a Heading component.
Skeleton.Button
Represents a Button component.
Skeleton.Tabs
Represents a Tabs component.
Skeleton.DoughnutChart
Represents doughnut chart
Skeleton.Table
Represents a Table component. Number of rows and columns can be customised
Skeleton.Card
Represents a card layout, number of rows can be customised and a variation with a doughnut chart (that is a common ui pattern) can also be used.
Skeleton.BarChart
This component represents a bar chart. The number of labels, bars and ticks are customisable.
Skeleton.ColumnChart
This component represents a column chart. The number of labels, groups and columns are customisable.
Skeleton.PanelList
This component represents a Panel list structure.
Skeleton.SubjectList
This component represents a Subject list structure.
Base
<Skeleton.Loader />
Heading
<Skeleton.Heading />
Button
<Skeleton.Button />
Tabs
<Skeleton.Tabs numberOfTabs={3} />
Doughnut chart
<Skeleton.DoughnutChart />
Table
<Skeleton.Table />
Card
Base
<Skeleton.Card />
With chart
<Skeleton.Card withChart />
Bar Chart
Base
<Skeleton.BarChart />
Custom rows and ticks
<Skeleton.BarChart numberOfLabels={2} numberOfRows={6} numberOfTicks={6} />
Column Chart
Base
<Skeleton.ColumnChart />
Grouped columns
<Skeleton.ColumnChart numberOfGroups={5} numberOfColumns={3} numberOfLabels={3} />
Panel List
<Skeleton.PanelList />
Subject List
<Skeleton.SubjectList />