From ff81539cb9c12969ba33d66934803f99c482c35e Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 24 Jan 2025 11:14:49 -0700
Subject: [PATCH] Use performance instead of settimeout for splitter animation

---
 .../layout/AppSplitter/AppSplitter.tsx        | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/web/src/components/layout/AppSplitter/AppSplitter.tsx b/web/src/components/layout/AppSplitter/AppSplitter.tsx
index c8ecd861b..7f00a65d9 100644
--- a/web/src/components/layout/AppSplitter/AppSplitter.tsx
+++ b/web/src/components/layout/AppSplitter/AppSplitter.tsx
@@ -174,27 +174,33 @@ export const AppSplitter = React.memo(
           // Calculate current percentage considering 'auto' cases
           const currentSizeNumber = getCurrentSizePercentage(currentSize, otherSize, container);
 
-          const NUMBER_OF_STEPS = 24;
-          const stepDuration = (duration * 1000) / NUMBER_OF_STEPS;
+          await new Promise((resolve) => {
+            const startTime = performance.now();
+            const endTime = startTime + duration * 1000;
 
-          for (let i = 0; i < NUMBER_OF_STEPS + 1; i++) {
-            await new Promise((resolve) =>
-              setTimeout(() => {
-                const progress = i / NUMBER_OF_STEPS;
-                const easedProgress = easeInOutCubic(progress);
-                const newSizeNumber =
-                  currentSizeNumber + (targetPercentage - currentSizeNumber) * easedProgress;
+            const animate = (currentTime: number) => {
+              const elapsedTime = currentTime - startTime;
+              const progress = Math.min(elapsedTime / (duration * 1000), 1);
 
-                const newSize = `${newSizeNumber}%`;
-                const otherSize = `${100 - newSizeNumber}%`;
+              const easedProgress = easeInOutCubic(progress);
+              const newSizeNumber =
+                currentSizeNumber + (targetPercentage - currentSizeNumber) * easedProgress;
 
-                const newSizes = side === 'left' ? [newSize, otherSize] : [otherSize, newSize];
+              const newSize = `${newSizeNumber}%`;
+              const otherSize = `${100 - newSizeNumber}%`;
 
-                setSplitSizes(newSizes);
+              const newSizes = side === 'left' ? [newSize, otherSize] : [otherSize, newSize];
+              setSplitSizes(newSizes);
+
+              if (currentTime < endTime) {
+                requestAnimationFrame(animate);
+              } else {
                 resolve(true);
-              }, stepDuration)
-            );
-          }
+              }
+            };
+
+            requestAnimationFrame(animate);
+          });
         }
       );