From 5f4856ad3c7e49fc4923d1cb25aca4cf3c50a37c Mon Sep 17 00:00:00 2001
From: plebeius <tom@plebbit.com>
Date: Fri, 9 Jan 2026 17:20:59 +0100
Subject: [PATCH] fix: synchronize blinking animation in moderation queue

---
 src/views/mod-queue/mod-queue.module.css |  2 ++
 src/views/mod-queue/mod-queue.tsx        | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/views/mod-queue/mod-queue.module.css b/src/views/mod-queue/mod-queue.module.css
index 748573ea..21c36e4c 100644
--- a/src/views/mod-queue/mod-queue.module.css
+++ b/src/views/mod-queue/mod-queue.module.css
@@ -133,6 +133,8 @@
   color: var(--mod-queue-alert-color);
   font-weight: bold;
   animation: blink 2s infinite;
+  /* Synchronize all animations by starting from the same phase */
+  animation-delay: calc(var(--mod-queue-blink-phase, 0s) * -1);
 }
 
 @keyframes blink {
diff --git a/src/views/mod-queue/mod-queue.tsx b/src/views/mod-queue/mod-queue.tsx
index 7f89c45e..ad5cdd80 100644
--- a/src/views/mod-queue/mod-queue.tsx
+++ b/src/views/mod-queue/mod-queue.tsx
@@ -383,6 +383,25 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV
     setResetFunction(reset);
   }, [reset, setResetFunction]);
 
+  // Synchronize blinking animation across all rows
+  // Set a CSS variable with the current animation phase so all elements start from the same point
+  // Update frequently to ensure elements rendered at different times stay synchronized
+  useEffect(() => {
+    const ANIMATION_DURATION = 2000; // 2 seconds
+    const UPDATE_INTERVAL = 100; // Update every 100ms for smooth synchronization
+
+    const updateAnimationPhase = () => {
+      // Calculate current phase in the animation cycle (0 to 2 seconds)
+      const phase = (Date.now() % ANIMATION_DURATION) / 1000;
+      document.documentElement.style.setProperty('--mod-queue-blink-phase', `${phase}s`);
+    };
+
+    // Update immediately and then at regular intervals
+    updateAnimationPhase();
+    const interval = setInterval(updateAnimationPhase, UPDATE_INTERVAL);
+    return () => clearInterval(interval);
+  }, []);
+
   const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
   const showBoardColumn = !resolvedAddress && !selectedBoardFilter;