From c4b3886ffc93de5e60977a7d7cb209eb3ab22662 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 10 Oct 2025 15:04:04 +0000
Subject: [PATCH] Fix: Resolve UI jittering on initial load

---
 src/components/moderation/ModerationQueue.tsx | 15 +++++++++++----
 src/components/moderation/QueueItem.tsx       |  5 +++--
 src/index.css                                 |  8 ++++++++
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx
index 6237ea7b..f3767133 100644
--- a/src/components/moderation/ModerationQueue.tsx
+++ b/src/components/moderation/ModerationQueue.tsx
@@ -148,9 +148,12 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
   // Enable transitions after initial render
   useEffect(() => {
     if (!loading && items.length > 0 && !hasRenderedOnce) {
-      // Delay to ensure DOM has painted
-      const timer = setTimeout(() => setHasRenderedOnce(true), 100);
-      return () => clearTimeout(timer);
+      // Use requestAnimationFrame to enable transitions AFTER first paint
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setHasRenderedOnce(true);
+        });
+      });
     }
   }, [loading, items.length, hasRenderedOnce]);
 
@@ -1695,7 +1698,11 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
     }
 
     return (
-      <div className="space-y-6">
+          <div 
+            className="flex flex-col gap-6" 
+            data-initial-load={!hasRenderedOnce ? "true" : "false"}
+            style={{ willChange: 'transform' }}
+          >
         {items.map((item) => (
           <QueueItem
             key={item.id}
diff --git a/src/components/moderation/QueueItem.tsx b/src/components/moderation/QueueItem.tsx
index ed658d6b..e0c0afe4 100644
--- a/src/components/moderation/QueueItem.tsx
+++ b/src/components/moderation/QueueItem.tsx
@@ -108,7 +108,7 @@ export const QueueItem = memo(({
   return (
     <Card 
       key={item.id} 
-      className={`border-l-4 ${!isInitialRender ? 'transition-opacity duration-200' : ''} ${
+      className={`border-l-4 ${
         validationResult?.blockingErrors && validationResult.blockingErrors.length > 0 ? 'border-l-red-600' :
         item.status === 'flagged' ? 'border-l-red-500' :
         item.status === 'approved' ? 'border-l-green-500' :
@@ -118,7 +118,8 @@ export const QueueItem = memo(({
       }`}
       style={{ 
         opacity: actionLoading === item.id ? 0.5 : 1,
-        pointerEvents: actionLoading === item.id ? 'none' : 'auto'
+        pointerEvents: actionLoading === item.id ? 'none' : 'auto',
+        transition: isInitialRender ? 'none' : 'opacity 200ms'
       }}
     >
       <CardHeader className={isMobile ? "pb-3 p-4" : "pb-4"}>
diff --git a/src/index.css b/src/index.css
index 709ba089..44715005 100644
--- a/src/index.css
+++ b/src/index.css
@@ -120,6 +120,14 @@ All colors MUST be HSL.
   }
 }
 
+/* Suppress ALL animations during initial queue render */
+[data-initial-load="true"] * {
+  animation-duration: 0s !important;
+  animation-delay: 0s !important;
+  transition-duration: 0s !important;
+  transition-delay: 0s !important;
+}
+
 /* Custom Uppy Photo Upload Styling */
 @layer components {
   /* Uppy Dashboard customization to match theme */