fix(plugin-charts): draw dashboard chart bars on first paint via isAnimationActive=false (#2756) (#2759)

#2727's settle re-mount tried to *heal* a frozen Recharts entrance
animation by re-mounting the ResponsiveContainer once the grid settled.
Live (react-grid-layout) that bet doesn't hold: the re-mount can land
back in mount-time measurement churn, so the rAF tween — which starts at
height 0 — stays stuck there and bars never draw, though axes/labels and
the data are present. Reproduced in a real browser on the showcase Chart
Gallery dashboard: pre-fix, bars sit at ~0 for 8s+; identical to the
reported magic-flow symptom.

Fix: dashboard chart widgets render with isAnimationActive={false}, so
there is no entrance-animation tween to freeze — bars render at final
geometry on the first committed frame, deterministically. With the
animation off there is nothing to heal, so ChartContainer skips its
settle re-mount (new disableSettleRemount prop), avoiding a needless
1-frame ResponsiveContainer reflow on first paint.

Every dashboard chart schema carries the flag (DatasetWidget +
DashboardRenderer + DashboardGridLayout, both chart and object-chart);
AdvancedChartImpl now honors isAnimationActive uniformly across
bar/line/area/pie/funnel/treemap/radar/scatter (funnel/treemap/radar/
scatter previously hard-coded animation on). Standalone chart views keep
their entrance animation.

Verified end-to-end in a real browser (worktree console → live backend):
before = frozen empty bars after 8s, after = bars drawn on first paint,
zero console errors, deterministic across fresh navigations and a fresh
tab. plugin-charts + plugin-dashboard: 156 tests pass; both type-check.

Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

packages/plugin-charts/src/AdvancedChartImpl.tsx

@@ -170,6 +170,11 @@ export default function AdvancedChartImpl({
   // Only emit the prop when explicitly disabled, so the default (animated)
   // behavior is byte-for-byte unchanged for every existing caller.
   const animProps = isAnimationActive === false ? { isAnimationActive: false as const } : {};
+  // When the entrance animation is off there is no stuck-at-0 tween to heal, so
+  // tell ChartContainer to skip its settle re-mount — avoids a needless 1-frame
+  // reflow on the dashboard's first paint (#2756). Animated callers keep the
+  // heal; this object is empty for them, leaving their markup unchanged.
+  const containerProps = isAnimationActive === false ? { disableSettleRemount: true } : {};
   const [isMobile, setIsMobile] = React.useState(false);
 
   // Recharts' top-level onClick payload: { activeLabel, activePayload, ... }
@@ -358,7 +363,7 @@ export default function AdvancedChartImpl({
       }
     });
     return (
-      <ChartContainer config={pieConfig} className={className}>
+      <ChartContainer config={pieConfig} className={className} {...containerProps}>
         <PieChart>
           <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
           <Pie
@@ -415,14 +420,14 @@ export default function AdvancedChartImpl({
       return bv - av;
     });
     return (
-      <ChartContainer config={config} className={className}>
+      <ChartContainer config={config} className={className} {...containerProps}>
         <FunnelChart>
           <ChartTooltip content={<ChartTooltipContent />} />
           <Funnel
             dataKey={dataKey}
             data={funnelData}
             nameKey={xAxisKey}
-            isAnimationActive
+            {...animProps}
             {...funnelClickProps}
           >
             <LabelList position="right" fill="hsl(var(--foreground))" stroke="none" dataKey={xAxisKey} />
@@ -447,8 +452,8 @@ export default function AdvancedChartImpl({
       fill: resolveColor(palette[idx % palette.length]),
     }));
     return (
-      <ChartContainer config={config} className={className}>
-        <Treemap data={tmData} dataKey="size" nameKey="name" isAnimationActive content={<TreemapCell />} {...treemapClickProps}>
+      <ChartContainer config={config} className={className} {...containerProps}>
+        <Treemap data={tmData} dataKey="size" nameKey="name" {...animProps} content={<TreemapCell />} {...treemapClickProps}>
           <Tooltip />
         </Treemap>
       </ChartContainer>
@@ -468,7 +473,7 @@ export default function AdvancedChartImpl({
       return <div className={className} />;
     }
     return (
-      <ChartContainer config={config} className={className}>
+      <ChartContainer config={config} className={className} {...containerProps}>
         <Sankey
           data={{ nodes, links }}
           nodePadding={24}
@@ -485,7 +490,7 @@ export default function AdvancedChartImpl({
   // Radar chart
   if (chartType === 'radar') {
     return (
-      <ChartContainer config={config} className={className}>
+      <ChartContainer config={config} className={className} {...containerProps}>
         <RadarChart data={data}>
           <PolarGrid />
           <PolarAngleAxis dataKey={xAxisKey} />
@@ -504,6 +509,7 @@ export default function AdvancedChartImpl({
                 stroke={color}
                 fill={color}
                 fillOpacity={0.6}
+                {...animProps}
               />
             );
           })}
@@ -515,7 +521,7 @@ export default function AdvancedChartImpl({
   // Scatter chart
   if (chartType === 'scatter') {
     return (
-      <ChartContainer config={config} className={className}>
+      <ChartContainer config={config} className={className} {...containerProps}>
         <ScatterChart>
           <CartesianGrid vertical={false} />
           <XAxis 
@@ -552,6 +558,7 @@ export default function AdvancedChartImpl({
                 data={data}
                 fill={color}
                 fillOpacity={cmp?.fillOpacity}
+                {...animProps}
                 {...scatterClickProps}
               />
             );
@@ -564,7 +571,7 @@ export default function AdvancedChartImpl({
   // Combo chart (mixed bar + line on same chart)
   if (chartType === 'combo') {
     return (
-      <ChartContainer config={config} className={className}>
+      <ChartContainer config={config} className={className} {...containerProps}>
         <BarChart data={data}>
           <CartesianGrid vertical={false} />
           <XAxis dataKey={xAxisKey} {...xAxisCommonProps} />
@@ -612,7 +619,7 @@ export default function AdvancedChartImpl({
   const gslug = (c: string) => 'g' + c.replace(/[^a-zA-Z0-9]/g, '');
 
   return (
-    <ChartContainer config={config} className={className}>
+    <ChartContainer config={config} className={className} {...containerProps}>
       <ChartComponent data={data} layout={isHorizontal ? 'vertical' : 'horizontal'} {...cartesianClickProps}>
         <defs>
           {gradColors.map((c) => (

packages/plugin-charts/src/ChartContainerImpl.settleRemount.test.tsx

@@ -145,4 +145,29 @@ describe('ChartContainer — settle re-mount (dashboard-chart-empty-first-render
 
     expect(mountCount).toBe(1); // no re-mount, no loop
   });
+
+  // #2756: dashboard charts render with `isAnimationActive={false}`, so there is
+  // no entrance-animation tween to heal. `disableSettleRemount` must fully
+  // suppress the settle re-mount — even at a positive, stable box — so the first
+  // paint is never followed by a needless ResponsiveContainer reflow.
+  it('never re-mounts when disableSettleRemount is set, even after settling at a non-zero box', () => {
+    act(() => {
+      render(
+        <ChartContainer config={{}} disableSettleRemount>
+          <MountProbe />
+        </ChartContainer>,
+      );
+    });
+    expect(mountCount).toBe(1);
+
+    // A real, settled positive box would normally trigger exactly one re-mount…
+    fireResize(320, 240);
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    // …but the flag opts out of it entirely: the observer never even armed.
+    expect(mountCount).toBe(1);
+    expect(roCallback).toBeNull(); // no ResizeObserver was created
+  });
 });

packages/plugin-charts/src/ChartContainerImpl.tsx

@@ -48,12 +48,20 @@ function ChartContainer({
   className,
   children,
   config,
+  disableSettleRemount,
   ...props
 }: React.ComponentProps<"div"> & {
   config: ChartConfig
   children: React.ComponentProps<
     typeof ResponsiveContainer
   >["children"]
+  /**
+   * Skip the settle re-mount below. Set by callers that render their series with
+   * `isAnimationActive={false}` (e.g. dashboard charts, see #2756): with no
+   * entrance-animation tween there is nothing to "heal", so re-mounting would
+   * only cost a needless 1-frame ResponsiveContainer reflow on first paint.
+   */
+  disableSettleRemount?: boolean
 }) {
   const uniqueId = React.useId()
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
@@ -78,9 +86,17 @@ function ChartContainer({
   // box). Headless/jsdom/happy-dom renders report a 0×0 box, so `settleNonce`
   // stays 0 and those tests see a single, ordinary render. See
   // dashboard-chart-empty-first-render.
+  //
+  // NOTE (#2756): the settle re-mount only *heals* an interrupted entrance
+  // animation — it bets that a clean re-mount replays the tween to completion.
+  // In a live react-grid-layout dashboard that bet doesn't hold (the re-mount
+  // itself can land back in the grid/measurement churn), so dashboard charts
+  // instead render with `isAnimationActive={false}` and pass
+  // `disableSettleRemount` — there is no tween to heal and no reflow to pay for.
   const containerRef = React.useRef<HTMLDivElement | null>(null)
   const [settleNonce, setSettleNonce] = React.useState(0)
   React.useEffect(() => {
+    if (disableSettleRemount) return
     const el = containerRef.current
     if (el == null || typeof ResizeObserver === "undefined") return
 
@@ -106,7 +122,7 @@ function ChartContainer({
       if (timer != null) clearTimeout(timer)
       observer.disconnect()
     }
-  }, [])
+  }, [disableSettleRemount])
 
   return (
     <ChartContext.Provider value={{ config }}>

packages/plugin-dashboard/src/DashboardGridLayout.tsx

@@ -194,6 +194,8 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
           xAxisKey: xAxisKey,
           series: [{ dataKey: effectiveYField }],
           colors: CHART_COLORS,
+          // Deterministic first paint inside the grid (#2756).
+          isAnimationActive: false,
           className: "h-full"
         };
       }
@@ -207,6 +209,8 @@ export const DashboardGridLayout: React.FC<DashboardGridLayoutProps> = ({
         xAxisKey: xAxisKey,
         series: [{ dataKey: yField }],
         colors: CHART_COLORS,
+        // Deterministic first paint inside the grid (#2756).
+        isAnimationActive: false,
         className: "h-full"
       };
     }

packages/plugin-dashboard/src/DashboardRenderer.tsx

@@ -529,6 +529,9 @@ const DashboardRendererInner = forwardRef<HTMLDivElement, DashboardRendererProps
                             label: resolveSeriesLabel(widgetData.object, effectiveYField, effectiveAggregate?.function),
                         }],
                         colors: CHART_COLORS,
+                        // Deterministic first paint inside the grid — no entrance
+                        // animation to freeze at height 0 (#2756).
+                        isAnimationActive: false,
                         drillDown: options.drillDown ?? defaultChartDrill(resolvedWidgetType),
                         compareTo: (widget as any).compareTo,
                         className: "h-[200px] sm:h-[250px] md:h-[300px]"
@@ -548,6 +551,8 @@ const DashboardRendererInner = forwardRef<HTMLDivElement, DashboardRendererProps
                         label: resolveSeriesLabel(undefined, yField, undefined),
                     }],
                     colors: CHART_COLORS,
+                    // Deterministic first paint inside the grid (#2756).
+                    isAnimationActive: false,
                     className: "h-[200px] sm:h-[250px] md:h-[300px]"
                 };
             }

packages/plugin-dashboard/src/DatasetWidget.tsx

@@ -552,7 +552,13 @@ export function DatasetWidget({ widget, dataSource }: { widget: any; dataSource:
   return (
     <div className={cn('relative h-full w-full min-h-[220px]')}>
       <SchemaRenderer
-        schema={{ type: 'chart', chartType, data: chartData, xAxisKey, series, ...(categoryColors ? { categoryColors } : {}) } as any}
+        // isAnimationActive: false — dashboard charts render at final geometry on
+        // the FIRST committed frame. Recharts' entrance animation is a rAF tween
+        // that starts at height 0 and, inside react-grid-layout's mount-time
+        // measurement churn, can freeze there — bars never draw until an unrelated
+        // re-render (#2756, follow-up to #2727's ineffective settle re-mount).
+        // Turning the tween off makes the first paint deterministic.
+        schema={{ type: 'chart', chartType, data: chartData, xAxisKey, series, isAnimationActive: false, ...(categoryColors ? { categoryColors } : {}) } as any}
         onChartClick={chartDrill}
         onSegmentClick={chartDrill}
       />

packages/plugin-dashboard/src/__tests__/DatasetWidget.animation.test.tsx

@@ -0,0 +1,60 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * #2756 — dashboard charts must render at final geometry on the FIRST committed
+ * frame. Recharts' entrance animation is a requestAnimationFrame tween that
+ * starts at height 0 and, inside react-grid-layout's mount-time measurement
+ * churn, can freeze there — the axes/labels paint but the bars never draw until
+ * an unrelated re-render. #2727's settle re-mount tried to heal that live and
+ * didn't. The deterministic fix: dashboard chart widgets pass
+ * `isAnimationActive: false`, so there is no tween to freeze.
+ *
+ * This asserts the wiring at the source — the chart schema DatasetWidget hands
+ * to the renderer carries the flag — captured via a stubbed SchemaRenderer.
+ */
+
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup, waitFor } from '@testing-library/react';
+
+let lastChartSchema: any = null;
+
+vi.mock('@object-ui/react', async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  SchemaRenderer: (props: any) => {
+    lastChartSchema = props.schema;
+    return null;
+  },
+}));
+
+import { DatasetWidget } from '../DatasetWidget';
+
+afterEach(() => {
+  cleanup();
+  lastChartSchema = null;
+});
+
+describe('DatasetWidget — dashboard chart animation (#2756)', () => {
+  it('hands the chart renderer isAnimationActive: false so bars draw on first paint', async () => {
+    const src = { queryDataset: vi.fn(async () => ({
+      rows: [
+        { status: '合作中', count: 5 },
+        { status: '已流失', count: 3 },
+        { status: '潜在', count: 4 },
+      ],
+    })) };
+
+    render(
+      <DatasetWidget
+        widget={{ type: 'bar', dataset: 'crm', dimensions: ['status'], values: ['count'] }}
+        dataSource={src}
+      />,
+    );
+
+    // Once data resolves the chart branch renders through SchemaRenderer.
+    await waitFor(() => expect(lastChartSchema).not.toBeNull());
+    expect(lastChartSchema.type).toBe('chart');
+    expect(lastChartSchema.chartType).toBe('bar');
+    // The fix: the entrance-animation tween is turned off.
+    expect(lastChartSchema.isAnimationActive).toBe(false);
+  });
+});