From e66f26f7a25aa5d8e2352625c87bc811a633e610 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 9 May 2025 14:24:27 -0600
Subject: [PATCH] Optimize dragging animation

---
 .../DashboardMetricItem.tsx                   | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
index dbaeed839..5f771a38f 100644
--- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
+++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardMetricItem/DashboardMetricItem.tsx
@@ -3,7 +3,7 @@ import { Card, CardHeader } from '@/components/ui/card/CardBase';
 import { useDashboardMetric } from './useDashboardMetric';
 import { MetricTitle } from './MetricTitle';
 import { createBusterRoute, BusterRoutes } from '@/routes';
-import { useMemoizedFn, useMount } from '@/hooks';
+import { useMemoizedFn } from '@/hooks';
 import { cn } from '@/lib/classMerge';
 import { BusterChart } from '@/components/ui/charts/BusterChart';
 
@@ -70,6 +70,10 @@ const DashboardMetricItemBase: React.FC<{
     setInitialAnimationEnded(metricId);
   });
 
+  const hideChart = useMemo(() => {
+    return isDragOverlay && data && data.length > 50;
+  }, [isDragOverlay, data?.length]);
+
   return (
     <Card
       ref={conatinerRef}
@@ -96,19 +100,23 @@ const DashboardMetricItemBase: React.FC<{
           isTable ? '' : 'p-3',
           isDragOverlay ? 'pointer-events-none' : 'pointer-events-auto'
         )}>
-        {renderChart && chartOptions && (
-          <BusterChart
-            data={data}
-            loading={loading}
-            error={error}
-            onInitialAnimationEnd={onInitialAnimationEndPreflight}
-            animate={!isDragOverlay && animate}
-            animateLegend={false}
-            columnMetadata={metricData?.data_metadata?.column_metadata}
-            readOnly={true}
-            {...chartOptions}
-          />
-        )}
+        {renderChart &&
+          chartOptions &&
+          (!hideChart ? (
+            <BusterChart
+              data={data}
+              loading={loading}
+              error={error}
+              onInitialAnimationEnd={onInitialAnimationEndPreflight}
+              animate={!isDragOverlay && animate}
+              animateLegend={false}
+              columnMetadata={metricData?.data_metadata?.column_metadata}
+              readOnly={true}
+              {...chartOptions}
+            />
+          ) : (
+            <div className="bg-gray-light/10 h-full w-full rounded" />
+          ))}
       </div>
     </Card>
   );