Loading Skeletons

From its inception, RosenCharts has been designed to cause no layout shifts or flickering after rendering. This makes it ideal for implementing smooth loading states and skeletons with little effort.

Code

One of the ways you can implement a loading state is by using the Suspense component. Then, you can either duplicate your chart to have a skeleton version with dummy data, or use the same chart with additional props that control the loading state. We recommend the first option, but you choose what works best for your use case.

Here's an example:

<div className="w-96">
  <Suspense fallback={<Skeleton_BarChart />}>
    <ServerBarChart /> {/* Simulating a chart that takes a bit to fetch data from a DB */}
  </Suspense>
</div>