From 88983dae3cbd7918d7ff581f21525f457bc242fe 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:00:29 +0000
Subject: [PATCH] Refactor: Suppress initial render transitions

---
 src/components/moderation/ModerationQueue.tsx | 11 +++++++++++
 src/components/moderation/QueueItem.tsx       |  4 +++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx
index 83304dc8..6237ea7b 100644
--- a/src/components/moderation/ModerationQueue.tsx
+++ b/src/components/moderation/ModerationQueue.tsx
@@ -69,6 +69,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
   const [actionLoading, setActionLoading] = useState<string | null>(null);
   const [notes, setNotes] = useState<Record<string, string>>({});
   const [activeTab, setActiveTab] = useState<QueueTab>('mainQueue');
+  const [hasRenderedOnce, setHasRenderedOnce] = useState(false);
   const [activeEntityFilter, setActiveEntityFilter] = useState<EntityFilter>('all');
   const [activeStatusFilter, setActiveStatusFilter] = useState<StatusFilter>('pending');
   const [photoModalOpen, setPhotoModalOpen] = useState(false);
@@ -144,6 +145,15 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
     itemsRef.current = items;
   }, [items]);
 
+  // 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);
+    }
+  }, [loading, items.length, hasRenderedOnce]);
+
   const fetchItems = useCallback(async (entityFilter: EntityFilter = 'all', statusFilter: StatusFilter = 'pending', silent = false, tab: QueueTab = 'mainQueue') => {
     if (!userRef.current) {
       return;
@@ -1698,6 +1708,7 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
             isAdmin={isAdmin()}
             isSuperuser={isSuperuser()}
             queueIsLoading={queue.isLoading}
+            isInitialRender={!hasRenderedOnce}
             onNoteChange={handleNoteChange}
             onApprove={handleModerationAction}
             onResetToPending={handleResetToPending}
diff --git a/src/components/moderation/QueueItem.tsx b/src/components/moderation/QueueItem.tsx
index 3e1dc5dd..ed658d6b 100644
--- a/src/components/moderation/QueueItem.tsx
+++ b/src/components/moderation/QueueItem.tsx
@@ -53,6 +53,7 @@ interface QueueItemProps {
   isAdmin: boolean;
   isSuperuser: boolean;
   queueIsLoading: boolean;
+  isInitialRender?: boolean;
   onNoteChange: (id: string, value: string) => void;
   onApprove: (item: ModerationItem, action: 'approved' | 'rejected', notes?: string) => void;
   onResetToPending: (item: ModerationItem) => void;
@@ -86,6 +87,7 @@ export const QueueItem = memo(({
   isAdmin,
   isSuperuser,
   queueIsLoading,
+  isInitialRender = false,
   onNoteChange,
   onApprove,
   onResetToPending,
@@ -106,7 +108,7 @@ export const QueueItem = memo(({
   return (
     <Card 
       key={item.id} 
-      className={`border-l-4 transition-opacity duration-200 ${
+      className={`border-l-4 ${!isInitialRender ? 'transition-opacity duration-200' : ''} ${
         validationResult?.blockingErrors && validationResult.blockingErrors.length > 0 ? 'border-l-red-600' :
         item.status === 'flagged' ? 'border-l-red-500' :
         item.status === 'approved' ? 'border-l-green-500' :