Skeleton

The Skeleton component in MUI is used to display a placeholder for content that is loading. Below are examples of how to use it in both React and Python Dash.

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    dmc.Box(
      sx={"display": "flex", "gap": 4, "flexDirection": 'column', "padding": 4 },
      children=[
        dmc.Skeleton(
            variant="text",
            width=400,
            height=20
        ),
        dmc.Box(
          sx={"display": "flex", "gap": 4 },
          children=[
            dmc.Skeleton(
                variant="circular",
                width=40,
                height=40
            ),
            dmc.Skeleton(
                variant="rectangular",
                width=350,
                height=118
            )
          ]
        )
      ]
    )
  ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Props Table

Below are the main props available for the Skeleton component:

Prop	Type	Default	Description
variant	"text" \| "circular" \| "rectangular"	"text"	Defines the shape of the skeleton placeholder.
width	number \| string	"100%"	Defines the width of the skeleton.
height	number \| string	"auto"	Defines the height of the skeleton.
animation	"pulse" \| "wave" \| false	"pulse"	Defines the animation of the skeleton.

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI Skeleton Documentation

Props Table​

Props Table