## Skeleton  
Use Skeleton component to disable user interactions and indicate loading state.  
Category: Feedback  

### Simple Usage

Use `Skeleton` to create a placeholder for loading content. `Skeleton` support the following props:

- `height` - height - any valid CSS value
- `width` - width - any valid CSS value
- `radius` - key of `theme.radius` or any valid CSS value to set border-radius
- `circle` - if true, width, height and border-radius will equal to value specified in `height` prop
- `animate` - true by default, controls animation

```python
import dash_mantine_components as dmc

component = dmc.Box(
    [
        dmc.Skeleton(height=50,  circle=True, mb="xl"),
        dmc.Skeleton(height=8, radius="xl"),
        dmc.Skeleton(height=8, my=6),
        dmc.Skeleton(height=8, w="70%", radius="xl"),
    ],
)
```
### Display Skeleton while loading

The `Seleton` will be visible while the children components are being updated by a Dash callback.

```python
import time

import dash_mantine_components as dmc
from dash import html, Output, Input, callback

from lib.utils import create_graph

component = html.Div(
    [
        dmc.Skeleton(
            visible=False,
            children=html.Div(id="skeleton-graph-container", children=create_graph()),
            mb=10,
        ),
        dmc.Button("Click Me!", id="graph-skeleton-button"),
    ]
)


@callback(
    Output("skeleton-graph-container", "children"),
    Input("graph-skeleton-button", "n_clicks"),
)
def update_graph(n_clicks):
    time.sleep(2)
    return create_graph()
```
### Use with dcc.Loading

For greater control over when the `Skeleton` is displayed and for how long, use the `dcc.Loading` component from
`dash-core-components`. Set the `Skeleton` in the `custom_spinner` prop and configure options such as:  

- `delay_show`: Specifies the wait time before displaying the `Skeleton`. This helps prevent flickering for fast-loading content.  
- `delay_hide`: Defines how long the `Skeleton` remains visible after loading completes, creating a smoother transition between the placeholder and final content.  
- `target_components`: Determines which components trigger the `Skeleton` display. This allows fine-grained control,
making the loading effect triggered only by specific components rather than automatically being triggered by any of the children.

Refer to the [Dash Documentation](https://dash.plotly.com/dash-core-components/loading) for more details.

Here is an example of `delay_hide` prop in `dcc.Loading` to prevent the `Skeleton` from showing for a very short time.

```python
import time
import dash_mantine_components as dmc
from dash import  Input, Output,  html, callback, dcc

component = html.Div(
    [
        dcc.Loading(
            children=html.Div([
                dmc.Text("Initial data", id="dccloading-div"),
                dmc.Text("The data only takes 200ms to update, but `delay_hide` is set to 1000ms to prevent flashing.")
            ]),
            delay_hide=1000,
            custom_spinner = dmc.Skeleton(
                visible=True,
                h="100%"
            ),
        ),
        dmc.Button("Update!", id="dccloading-button"),
    ]
)

@callback(
    Output("dccloading-div", "children"),
    Input("dccloading-button", "n_clicks"),
    prevent_initial_call=True
)
def update_graph(n):
    time.sleep(.2)
    return f"Data updated {n} times"
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### Skeleton Selectors

| Selector | Static selector         | Description   |
|----------|-------------------------|---------------|
| root     | .mantine-Skeleton-root  | Root element  |

#### Skeleton CSS Variables

| Selector | Variable          | Description                      |
|----------|------------------|----------------------------------|
| root     | --skeleton-height | Controls skeleton height        |
|          | --skeleton-width  | Controls skeleton width         |
|          | --skeleton-radius | Controls skeleton border-radius |

#### Skeleton Data Attributes

| Selector | Attribute      | Condition               |
|----------|--------------|-------------------------|
| root     | data-visible | `visible` prop is set   |
| root     | data-animate | `animate` prop is set   |



### Keyword Arguments
#### Skeleton

- children (a list of or a singular dash component, string or number; optional):
    Content.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- animate (boolean; optional):
    Determines whether Skeleton should be animated, `True` by default.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- circle (boolean; optional):
    If set, Skeleton `width` and `border-radius` are equal to its
    `height`, `False` by default.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- height (string | number; optional):
    Skeleton `height`, numbers are converted to rem, `auto` by
    default.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set border-radius.
    Numbers are converted to rem. `theme.defaultRadius` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visible (boolean; default True):
    Determines whether Skeleton overlay should be displayed, `True` by
    default.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- width (string | number; optional):
    Skeleton `width`, numbers are converted to rem, `100%` by default,
    ignored when `circle` prop is set.