alex/LocalAGI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): Remove infinite animations due to high CPU usage

Browse Source
This commit is contained in:
Richard Palethorpe
2025-03-31 12:36:47 +01:00
parent 8e703c0ac2
commit 045fb1f8d6
1 changed files with 14 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
webui/react-ui/src/App.css
View File

@@ -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%; }