Refactor: Suppress initial render transitions

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}

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' :