From ac0e66db0a5350e067716d6110670f3f43d0927b Mon Sep 17 00:00:00 2001
From: Ademiitura <ademiituraadekoya23@gmail.com>
Date: Sat, 30 May 2026 20:38:03 +0100
Subject: [PATCH] perf(ui): offload progress bar to compositor thread via
 transform

- Replace inline width animation with transform: scaleX() on TrickleBar
- Add will-change: transform for explicit compositor layer promotion
- Wrap bar in overflow: hidden container for correct scaleX clipping
- Preserves aria-valuenow for accessibility

Closes #238
---
 src/app/components/TopLoadingBar.tsx | 32 ++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/app/components/TopLoadingBar.tsx b/src/app/components/TopLoadingBar.tsx
index e8d76d2..dfbfe09 100644
--- a/src/app/components/TopLoadingBar.tsx
+++ b/src/app/components/TopLoadingBar.tsx
@@ -21,24 +21,38 @@ export function useProgressBar() {
 // ─── Trickle bar — isolated so the RAF hook runs unconditionally ──────────────
 
 function TrickleBar({ width }: { width: number }) {
+  const scale = width / 100;
+
   return (
     <div
-      role="progressbar"
-      aria-label="Loading"
-      aria-valuenow={width}
+      aria-hidden="true"
       style={{
         position: "fixed",
         top: 0,
         left: 0,
+        right: 0,
         height: "3px",
-        width: `${width}%`,
-        background: "linear-gradient(90deg, #99DC1B, #39FF14)",
-        boxShadow: "0 0 8px rgba(153,220,27,0.7)",
-        transition: width === 100 ? "width 0.2s ease-out" : "width 0.12s linear",
+        overflow: "hidden",
         zIndex: 9999,
-        borderRadius: "0 2px 2px 0",
       }}
-    />
+    >
+      <div
+        role="progressbar"
+        aria-label="Loading"
+        aria-valuenow={width}
+        style={{
+          height: "100%",
+          width: "100%",
+          transform: `scaleX(${scale})`,
+          transformOrigin: "left center",
+          willChange: "transform",
+          background: "linear-gradient(90deg, #99DC1B, #39FF14)",
+          boxShadow: "0 0 8px rgba(153,220,27,0.7)",
+          transition: width === 100 ? "transform 0.2s ease-out" : "transform 0.12s linear",
+          borderRadius: "0 2px 2px 0",
+        }}
+      />
+    </div>
   );
 }