panelui-native 0.62.0 → 0.63.0

package/src/components/line-chart/index.tsx

@@ -221,7 +221,7 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
     xDataKey = 'date',
     status = 'ready',
     aspectRatio = 2,
-    animationDuration = 1100,
+    animationDuration = 700,
     domainDuration = 500,
     yDomain,
     curve = 'monotone',
@@ -341,17 +341,27 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
       reveal.value = 0;
       reveal.value = withTiming(1, {
         duration: animationDuration,
-        easing: Easing.bezier(0.85, 0, 0.15, 1),
+        easing: Easing.out(Easing.cubic),
       });
     },
     [reducedMotion, animationDuration, reveal]
   );
 
   useEffect(() => {
-    if (revealed.current || loading || plot.width <= 0 || !data.length) return;
+    /*
+     * Going back to `loading` arms the reveal again. Without this a chart that
+     * is refetched comes back fully drawn on the frame the data lands, which
+     * reads as the loading state having been for nothing.
+     */
+    if (loading) {
+      revealed.current = false;
+      reveal.value = 0;
+      return;
+    }
+    if (revealed.current || plot.width <= 0 || !data.length) return;
     revealed.current = true;
     playReveal();
-  }, [loading, plot.width, data.length, playReveal]);
+  }, [loading, plot.width, data.length, playReveal, reveal]);
 
   // `replay()` re-runs the reveal — for a control the caller wires up.
   useImperativeHandle(ref, () => ({ replay: playReveal }), [playReveal]);

package/src/components/pie-chart/index.tsx

@@ -206,7 +206,7 @@ const PieChartRoot = forwardRef<PieChartHandle, PieChartProps>(function PieChart
     endAngle = 360,
     padAngle = 0,
     minAngle = 0,
-    animationDuration = 900,
+    animationDuration = 620,
     status = 'ready',
     activeIndex: activeIndexProp,
     onActiveIndexChange,
@@ -290,7 +290,7 @@ const PieChartRoot = forwardRef<PieChartHandle, PieChartProps>(function PieChart
       reveal.value = 0;
       reveal.value = withTiming(1, {
         duration: animationDuration,
-        easing: Easing.bezier(0.85, 0, 0.15, 1),
+        easing: Easing.out(Easing.cubic),
       });
     },
     [reducedMotion, animationDuration, reveal]