From 012d1c452b0178b3c88c985d33edb29e96c05f46 Mon Sep 17 00:00:00 2001
From: SuperComboGamer <alec200500600@gmail.com>
Date: Sat, 20 Dec 2025 23:46:24 -0500
Subject: [PATCH] refactor: optimize button animations and interval checks for
 performance

This commit introduces several performance improvements across the UI components:

- Updated the Button component to enhance hover animations by grouping styles for better GPU efficiency.
- Adjusted the interval timing in the BoardView and WorktreePanel components from 1 second to 3 and 5 seconds respectively, reducing CPU/GPU usage.
- Replaced the continuous gradient rotation animation with a subtle pulse effect in global CSS to further optimize rendering performance.

These changes aim to improve the overall responsiveness and efficiency of the UI components.
---
 apps/ui/src/components/ui/button.tsx          |  6 ++--
 apps/ui/src/components/views/board-view.tsx   |  2 +-
 .../worktree-panel/worktree-panel.tsx         |  5 ++--
 apps/ui/src/styles/global.css                 | 29 ++++++++++---------
 4 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/apps/ui/src/components/ui/button.tsx b/apps/ui/src/components/ui/button.tsx
index b5ec3738..75ec9abd 100644
--- a/apps/ui/src/components/ui/button.tsx
+++ b/apps/ui/src/components/ui/button.tsx
@@ -72,15 +72,15 @@ function Button({
       <button
         className={cn(
           buttonVariants({ variant, size }),
-          "p-[1px]", // Force 1px padding for the gradient border
+          "group p-[1px]", // Force 1px padding for the gradient border, group for hover animation
           className
         )}
         data-slot="button"
         disabled={isDisabled}
         {...props}
       >
-        {/* Animated rotating gradient border - smoother animation */}
-        <span className="absolute inset-[-1000%] animate-[spin_3s_linear_infinite] animated-outline-gradient opacity-75 transition-opacity duration-300 group-hover:opacity-100" />
+        {/* Animated rotating gradient border - only animates on hover for GPU efficiency */}
+        <span className="absolute inset-[-1000%] animated-outline-gradient opacity-75 transition-opacity duration-300 group-hover:animate-[spin_3s_linear_infinite] group-hover:opacity-100" />
 
         {/* Inner content container */}
         <span
diff --git a/apps/ui/src/components/views/board-view.tsx b/apps/ui/src/components/views/board-view.tsx
index 0c9449b2..9f017447 100644
--- a/apps/ui/src/components/views/board-view.tsx
+++ b/apps/ui/src/components/views/board-view.tsx
@@ -728,7 +728,7 @@ export function BoardView() {
 
     // Check immediately, then every 3 seconds
     checkAndStartFeatures();
-    const interval = setInterval(checkAndStartFeatures, 1000);
+    const interval = setInterval(checkAndStartFeatures, 3000);
 
     return () => {
       // Mark as inactive to prevent any pending async operations from continuing
diff --git a/apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx b/apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx
index 877d5cd4..68a68a92 100644
--- a/apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx
+++ b/apps/ui/src/components/views/board-view/worktree-panel/worktree-panel.tsx
@@ -102,12 +102,13 @@ export function WorktreePanel({
 
   const toggleCollapsed = () => setIsCollapsed((prev) => !prev);
 
-  // Periodic interval check (1 second) to detect branch changes on disk
+  // Periodic interval check (5 seconds) to detect branch changes on disk
+  // Reduced from 1s to 5s to minimize GPU/CPU usage from frequent re-renders
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   useEffect(() => {
     intervalRef.current = setInterval(() => {
       fetchWorktrees({ silent: true });
-    }, 1000);
+    }, 5000);
 
     return () => {
       if (intervalRef.current) {
diff --git a/apps/ui/src/styles/global.css b/apps/ui/src/styles/global.css
index 59dce140..1e094186 100644
--- a/apps/ui/src/styles/global.css
+++ b/apps/ui/src/styles/global.css
@@ -597,15 +597,13 @@
   }
 
   /* Animated border for in-progress cards */
-  @keyframes border-rotate {
-    0% {
-      background-position: 0% 50%;
+  /* Using a subtle pulse animation instead of continuous gradient rotation for GPU efficiency */
+  @keyframes border-pulse {
+    0%, 100% {
+      opacity: 0.7;
     }
     50% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0% 50%;
+      opacity: 1;
     }
   }
 
@@ -614,15 +612,20 @@
     border-radius: 0.75rem;
     padding: 2px;
     background: linear-gradient(
-      90deg,
+      135deg,
       var(--running-indicator),
-      color-mix(in oklch, var(--running-indicator), transparent 50%),
-      var(--running-indicator),
-      color-mix(in oklch, var(--running-indicator), transparent 50%),
+      color-mix(in oklch, var(--running-indicator), transparent 30%),
       var(--running-indicator)
     );
-    background-size: 200% 100%;
-    animation: border-rotate 3s ease infinite;
+    animation: border-pulse 2s ease-in-out infinite;
+  }
+
+  /* Pause animation when user prefers reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .animated-border-wrapper {
+      animation: none;
+      opacity: 1;
+    }
   }
 
   .animated-border-wrapper > * {