From 045fb1f8d6006c46ceb67d004a182222fa74e651 Mon Sep 17 00:00:00 2001
From: Richard Palethorpe <io@richiejp.com>
Date: Mon, 31 Mar 2025 12:36:47 +0100
Subject: [PATCH] fix(ui): Remove infinite animations due to high CPU usage

---
 webui/react-ui/src/App.css | 66 ++++++++------------------------------
 1 file changed, 14 insertions(+), 52 deletions(-)

diff --git a/webui/react-ui/src/App.css b/webui/react-ui/src/App.css
index 0b3d1a7..98f6b46 100644
--- a/webui/react-ui/src/App.css
+++ b/webui/react-ui/src/App.css
@@ -79,45 +79,13 @@ body {
   position: relative;
   overflow-x: hidden;
   background-image: 
-      radial-gradient(circle at 10% 20%, rgba(0, 255, 149, 0.05) 0%, transparent 20%),
-      radial-gradient(circle at 90% 80%, rgba(255, 0, 177, 0.05) 0%, transparent 20%),
-      radial-gradient(circle at 50% 50%, rgba(94, 0, 255, 0.05) 0%, transparent 30%),
+      radial-gradient(circle at 10% 20%, rgba(0, 255, 149, 0.05) 0%, transparent 100%),
+      radial-gradient(circle at 90% 80%, rgba(255, 0, 177, 0.05) 0%, transparent 100%),
+      radial-gradient(circle at 50% 50%, rgba(94, 0, 255, 0.05) 0%, transparent 80%),
       linear-gradient(180deg, var(--darker-bg) 0%, var(--dark-bg) 100%);
   background-attachment: fixed;
 }
 
-body::before {
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: repeating-linear-gradient(
-      transparent,
-      transparent 2px,
-      rgba(0, 0, 0, 0.1) 2px,
-      rgba(0, 0, 0, 0.1) 4px
-  );
-  pointer-events: none;
-  z-index: 1000;
-  opacity: 0.3;
-}
-
-body::after {
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 4px;
-  background: linear-gradient(90deg, var(--primary), var(--secondary));
-  opacity: 0.7;
-  z-index: 1001;
-  animation: scanline 6s linear infinite;
-  pointer-events: none;
-}
-
 h1, h2, h3, h4, h5, h6 {
   font-weight: 700;
 }
@@ -128,11 +96,13 @@ h1 {
   text-shadow: var(--neon-glow);
   margin-bottom: 1rem;
   position: relative;
-  animation: neonPulse 2s infinite;
+  transform: translateZ(0);
+  text-shadow: 0 0 1px var(--primary), 0 0 10px var(--primary);
 }
 
 h1:hover {
   animation: glitch 0.3s infinite;
+  transform: translateZ(0);
 }
 
 h2 {
@@ -312,7 +282,7 @@ a:hover {
   display: inline-block;
   margin-right: 5px;
   color: var(--primary);
-  animation: pulse 1.5s infinite;
+  transform: translateZ(0);
 }
 
 .status-paused, .inactive {
@@ -337,7 +307,7 @@ a:hover {
   background-color: var(--primary);
   margin-right: 0.5rem;
   box-shadow: 0 0 5px var(--primary);
-  animation: pulse 2s infinite;
+  transform: translateZ(0);
 }
 
 .status-text {
@@ -608,6 +578,7 @@ a:hover {
 .card:hover::after {
   width: 100%;
   animation: gradientMove 3s linear infinite;
+  transform: translateZ(0);
 }
 
 .card-link {
@@ -661,6 +632,7 @@ a:hover {
 .agent-card:hover::after {
   width: 100%;
   animation: gradientMove 3s linear infinite;
+  transform: translateZ(0);
 }
 
 .agent-actions {
@@ -703,6 +675,7 @@ a:hover {
 .agent-action:hover::after {
   width: 100%;
   animation: gradientMove 3s linear infinite;
+  transform: translateZ(0);
 }
 
 @keyframes gradientMove {
@@ -719,7 +692,7 @@ a:hover {
 .dashboard-header h1 {
   font-size: 2.5rem;
   letter-spacing: 2px;
-  animation: gentlePulse 3s infinite;
+  transform: translateZ(0);
 }
 
 .stats-cards {
@@ -767,6 +740,7 @@ a:hover {
 .stat-card:hover::after {
   width: 100%;
   animation: gradientMove 3s linear infinite;
+  transform: translateZ(0);
 }
 
 .stat-value {
@@ -829,6 +803,7 @@ a:hover {
 .stat-item:hover::after {
   width: 100%;
   animation: gradientMove 3s linear infinite;
+  transform: translateZ(0);
 }
 
 .stat-count {
@@ -972,7 +947,6 @@ a:hover {
   height: 2px;
   background: linear-gradient(90deg, var(--primary), var(--secondary), var(--tertiary), var(--primary));
   background-size: 200% 100%;
-  animation: gradientMove 3s linear infinite;
 }
 
 .agent-form-container {
@@ -1543,7 +1517,6 @@ select.form-control {
   transform: translateX(-50%);
   color: var(--primary);
   text-shadow: var(--neon-glow);
-  animation: gentlePulse 3s infinite;
 }
 
 .dashboard-title:hover {
@@ -1699,17 +1672,6 @@ select.form-control {
   overflow: hidden;
 }
 
-.avatar-placeholder::after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 4px;
-  background: var(--primary);
-  bottom: 0;
-  left: 0;
-  animation: loading-progress 2s infinite linear;
-}
-
 @keyframes loading-progress {
   0% { width: 0; }
   50% { width: 100%; }