Skip to main content

ChartLoading

The ChartLoading component displays a shimmer loading state specifically designed for bar charts. It shows a placeholder with animated bars that create a loading effect until the actual chart data is ready to be displayed.

Example​

Python Dash Example​

import dash
from dash import html
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

dash._dash_renderer._set_react_version('18.2.0')

app.layout = dmc.YipitMUIProvider(
    children=[
        dmc.ChartLoading()
    ]
)

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

Implementation Details​

The ChartLoading component is a pre-styled loading state with the following characteristics:

  • Fixed height of 600px
  • Fixed padding of 32px
  • White background with grey border
  • Shimmer animation effect that runs continuously
  • Seven placeholder bars with varying heights
  • Header placeholder with shimmer effect
  • Border radius of 8px

The component requires no props and cannot be customized. It's designed to be a simple drop-in loading state for bar chart visualizations.

Animation​

The component features a shimmer animation that moves from left to right continuously, creating a subtle loading effect. The animation:

  • Runs in a 2-second linear loop
  • Uses a gradient background that shifts position
  • Applies to both the header placeholder and bars