diff --git a/src/components/moderation/ModerationQueue.tsx b/src/components/moderation/ModerationQueue.tsx index 43b6fbd8..e2fd16ff 100644 --- a/src/components/moderation/ModerationQueue.tsx +++ b/src/components/moderation/ModerationQueue.tsx @@ -520,55 +520,58 @@ export const ModerationQueue = forwardRef((props, ref) => { return a.id.localeCompare(b.id); }); - // Use smart merging for silent refreshes if strategy is 'merge' - if (silent && refreshStrategy === 'merge') { - const mergeResult = smartMergeArray(items, formattedItems, { - compareFields: ['status', 'reviewed_at', 'reviewed_by', 'reviewer_notes', 'submission_type', 'entity_name', 'park_name'], - preserveOrder: true, - addToTop: true, + // ALWAYS use smart merge to detect actual changes (prevents flashing) + const mergeResult = smartMergeArray(items, formattedItems, { + compareFields: ['status', 'reviewed_at', 'reviewed_by', 'reviewer_notes', 'submission_type', 'entity_name', 'park_name'], + preserveOrder: silent, // Only preserve order for silent refreshes + addToTop: true, + }); + + // Only update state if there are actual changes + if (mergeResult.hasChanges) { + const actuallyNewItems = mergeResult.changes.added.length; + + // Debug logging for smart merge + console.log('🔄 Smart merge detected changes:', { + added: actuallyNewItems, + updated: mergeResult.changes.updated.length, + removed: mergeResult.changes.removed.length, + totalItems: mergeResult.items.length, + silent, }); - - // Only update state if there are actual changes - if (mergeResult.hasChanges) { - const actuallyNewItems = mergeResult.changes.added.length; - - // Debug logging for smart merge - console.log('🔄 Smart merge detected changes:', { - added: actuallyNewItems, - updated: mergeResult.changes.updated.length, - removed: mergeResult.changes.removed.length, - totalItems: mergeResult.items.length, + + // Only apply protection map for silent refreshes + let finalItems = mergeResult.items; + if (silent && preserveInteraction && interactingWith.size > 0) { + finalItems = mergeResult.items.map(item => { + if (interactingWith.has(item.id)) { + const currentItem = items.find(i => i.id === item.id); + return currentItem || item; + } + return item; }); - - // Only apply protection map if needed - let finalItems = mergeResult.items; - if (preserveInteraction && interactingWith.size > 0) { - finalItems = mergeResult.items.map(item => { - if (interactingWith.has(item.id)) { - const currentItem = items.find(i => i.id === item.id); - return currentItem || item; - } - return item; - }); - } + } - // Only call setItems if reference has actually changed - if (finalItems !== items) { - setItems(finalItems); - } - - // Only set new items count if there are genuinely new items - if (actuallyNewItems > 0) { - setNewItemsCount(actuallyNewItems); - } - } else { - // No changes detected - skip all state updates - console.log('✅ No changes detected, keeping current state'); + // Only call setItems if reference has actually changed + if (finalItems !== items) { + setItems(finalItems); + } + + // For non-silent refreshes, reset the counter + if (!silent) { + setNewItemsCount(0); + } else if (actuallyNewItems > 0) { + // For silent refreshes, show new items count + setNewItemsCount(actuallyNewItems); } } else { - // Full replacement for non-silent refreshes or 'replace' strategy - setItems(formattedItems); - setNewItemsCount(0); + // No changes detected - skip all state updates + console.log('✅ No changes detected, keeping current state'); + + // For non-silent refreshes, still reset the counter even if no changes + if (!silent) { + setNewItemsCount(0); + } } } catch (error: any) { console.error('Error fetching moderation items:', error);