Fix: Resolve UI jittering on initial load

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}

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"}>

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 */