From 578caaffc2be1f1051750a58f5e725ff03cb0c76 Mon Sep 17 00:00:00 2001
From: Tom Butcher <tom@tombutcher.work>
Date: Sun, 9 Aug 2026 15:10:35 +0100
Subject: [PATCH] Refactor HProgress component and CSS for improved animation
 and layout

- Updated the HProgress component to include a mask and wave animation for a more visually appealing progress display.
- Adjusted CSS styles in App.css to enhance the animation responsiveness and ensure seamless transitions.
- Removed unnecessary postMessage calls in electrobun-bridge.js to streamline message handling.
- Cleaned up rpc.js by removing the rendererResponseAck handler for better code clarity.
---
 assets/stylesheets/App.css                    | 42 ++++++++++++-------
 src/components/Dashboard/common/HProgress.jsx | 15 ++++---
 src/desktop/rpc.js                            |  3 --
 src/electrobun-bridge.js                      |  7 ----
 4 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index 0ee6bb8..6a3737d 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -973,10 +973,11 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
 
 @keyframes h-progress-macos-wave {
   0% {
-    transform: translateX(-120%);
+    transform: translateX(0);
   }
   100% {
-    transform: translateX(120%);
+    /* One gradient period (40cqw of a 200cqw-wide element) for a seamless loop */
+    transform: translateX(20%);
   }
 }
 
@@ -1000,6 +1001,8 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   flex: 1;
   overflow: hidden;
   vertical-align: middle;
+  /* Lets the wave size itself against the full track via cqw units */
+  container-type: inline-size;
 }
 
 .h-progress-bg,
@@ -1014,22 +1017,33 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   inset-inline-start: 0;
 }
 
-.h-progress-bg-active::after {
-  content: '';
+/* Mask that clips the wave to the filled portion of the bar. Its width
+   tracks the fill, while the wave inside keeps a constant width so Safari
+   doesn't restart/freeze the animation when progress updates. */
+.h-progress-bg-mask {
   position: absolute;
-  inset: 0;
-  border-radius: inherit;
+  inset-block: 0;
+  inset-inline-start: 0;
+  overflow: hidden;
   pointer-events: none;
-  background: linear-gradient(
+  transition: width 0.1s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+
+.h-progress-bg-wave {
+  position: absolute;
+  inset-block: 0;
+  /* Constant width relative to the full track (.h-progress-inner),
+     independent of the mask's changing width. Starts one period early so
+     the pattern always covers the track while sliding right. */
+  inset-inline-start: -40cqw;
+  width: 200cqw;
+  background: repeating-linear-gradient(
     90deg,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.08) 18%,
-    rgba(255, 255, 255, 0.42) 50%,
-    rgba(255, 255, 255, 0.08) 82%,
-    rgba(255, 255, 255, 0) 100%
+    rgba(255, 255, 255, 0) 0,
+    rgba(255, 255, 255, 0.35) 20cqw,
+    rgba(255, 255, 255, 0) 40cqw
   );
-  width: 55%;
-  animation: h-progress-macos-wave 1.6s ease-in-out infinite;
+  animation: h-progress-macos-wave 1s linear infinite;
 }
 
 .h-progress-text {
diff --git a/src/components/Dashboard/common/HProgress.jsx b/src/components/Dashboard/common/HProgress.jsx
index a46156e..55e61e6 100644
--- a/src/components/Dashboard/common/HProgress.jsx
+++ b/src/components/Dashboard/common/HProgress.jsx
@@ -176,12 +176,7 @@ const HProgress = forwardRef(function HProgress(
       }}
     >
       <div
-        className={[
-          'h-progress-bg',
-          progressStatus === 'active' ? 'h-progress-bg-active' : null
-        ]
-          .filter(Boolean)
-          .join(' ')}
+        className='h-progress-bg'
         style={{
           width: `${resolvedPercent}%`,
           height: barHeight,
@@ -192,6 +187,14 @@ const HProgress = forwardRef(function HProgress(
       >
         {innerInfo}
       </div>
+      {progressStatus === 'active' && (
+        <div
+          className='h-progress-bg-mask'
+          style={{ width: `${resolvedPercent}%`, borderRadius }}
+        >
+          <div className='h-progress-bg-wave' />
+        </div>
+      )}
       {successValue != null && (
         <div
           className='h-progress-success-bg'
diff --git a/src/desktop/rpc.js b/src/desktop/rpc.js
index cb3deef..91a1fdd 100644
--- a/src/desktop/rpc.js
+++ b/src/desktop/rpc.js
@@ -102,9 +102,6 @@ export function createAppRpc() {
     handlers: {
       requests: requestHandlers,
       messages: {
-        rendererResponseAck: ({ id }) => {
-          console.log('[rpc-diagnostic] renderer received response', id)
-        },
         rendererRequest: ({ id, method, params }) => {
           const handler = requestHandlers[method]
           if (!handler) {
diff --git a/src/electrobun-bridge.js b/src/electrobun-bridge.js
index 4221a9e..2c9f621 100644
--- a/src/electrobun-bridge.js
+++ b/src/electrobun-bridge.js
@@ -27,13 +27,6 @@ function dispatchMessage(channel, data) {
 
     pendingRequests.delete(data.id)
     clearTimeout(pendingRequest.timeout)
-    window.__electrobunBunBridge?.postMessage(
-      JSON.stringify({
-        type: 'message',
-        id: 'rendererResponseAck',
-        payload: { id: data.id }
-      })
-    )
 
     if (data.success) {
       pendingRequest.resolve(data.result)