HooksPro

useChartReload

Drives the reload button of a chart card: loading skeleton, your task, then the chart draws in again.

switches to , runs the task you pass (fetching new data, for example) and waits at least two steps, so the skeleton is readable rather than a flash. Then returns to and goes up; pass it as so the chart plays its enter sequence again.

Import

tsx

import { useChartReload } from "@wunderui/react/charts"

Comes with WunderUI Core and Pro, in the entry of the package from your plan. See the plans.

Signature

useChartReload(): ChartReload

Returns

Field	Type
state	"ready" \| "loading"
versionBumped after every reload; pass it as `animationKey` to replay the enter sequence.	number
reloadShows the loading state, runs `task` (or waits briefly), then draws the chart in again.	(task?: () => unknown \| Promise<unknown>) => Promise<void>

Examples

Reload button on a chart card

tsx

import { BarChart, ChartCard, useChartReload } from "@wunderui/react/charts"

export function Signups({ data }: { data: { week: string; signups: number }[] }) {
  const loader = useChartReload()
  return (
    <ChartCard title="Sign-ups" onReload={() => void loader.reload()} state={loader.state}>
      <BarChart data={data} index="week" series={[{ key: "signups", label: "Sign-ups" }]} state={loader.state} animationKey={loader.version} label="Sign-ups per week" />
    </ChartCard>
  )
}

Reload with a fetch

tsx

const loader = useChartReload()
const [rows, setRows] = React.useState(initialRows)

const refresh = () => loader.reload(async () => {
  const res = await fetch("/api/signups")
  setRows(await res.json())
})

Notes

Pass to the chart and to the ChartCard: both show their loading skeletons from it.
Under reduced motion the chart comes back without the draw-in; the loading state still shows.
Errors thrown by the task still end the loading state; handle them in the task.

PrevioususeChartLegend NextuseDataTableUrlState