Fix admin page flashing

This commit is contained in:
gpt-engineer-app[bot]
2025-10-09 17:14:45 +00:00
parent ff7c90e62d
commit 356cf2b54b
4 changed files with 69 additions and 36 deletions

View File

@@ -541,8 +541,8 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
}, []); // Empty deps - use refs instead
// Debounced filters to prevent rapid-fire calls
const debouncedEntityFilter = useDebounce(activeEntityFilter, 500);
const debouncedStatusFilter = useDebounce(activeStatusFilter, 500);
const debouncedEntityFilter = useDebounce(activeEntityFilter, 1000);
const debouncedStatusFilter = useDebounce(activeStatusFilter, 1000);
// Store latest filter values in ref to avoid dependency issues
const filtersRef = useRef({ entityFilter: debouncedEntityFilter, statusFilter: debouncedStatusFilter });
@@ -568,9 +568,18 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
}
fetchDebounceRef.current = setTimeout(() => {
fetchItems(entityFilter, statusFilter, silent, tab);
}, 100);
}, 1000); // 1 second debounce
}, [fetchItems]);
// Clean up debounce on unmount
useEffect(() => {
return () => {
if (fetchDebounceRef.current) {
clearTimeout(fetchDebounceRef.current);
}
};
}, []);
// Initial fetch on mount and filter changes
useEffect(() => {
if (!user) return;
@@ -797,10 +806,8 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
description: "Submission and all items have been reset to pending status",
});
// Silent cleanup after delay
setTimeout(() => {
fetchItems(activeEntityFilter, activeStatusFilter, true);
}, 2000);
// Optimistic update - item will reappear via realtime
setItems(prev => prev.filter(i => i.id !== item.id));
} catch (error: any) {
console.error('Error resetting submission:', error);
toast({
@@ -1008,10 +1015,9 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
description: "All entities created successfully",
});
// Silent cleanup after delay
setTimeout(() => {
fetchItems(activeEntityFilter, activeStatusFilter, true);
}, 2000);
// Optimistic update - remove from queue
setItems(prev => prev.filter(i => i.id !== item.id));
recentlyRemovedRef.current.add(item.id);
return;
}
@@ -1107,10 +1113,9 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
description: `Successfully approved and published ${photoSubmission.items.length} photo(s)`,
});
// Silent cleanup after delay
setTimeout(() => {
fetchItems(activeEntityFilter, activeStatusFilter, true);
}, 2000);
// Optimistic update - remove from queue
setItems(prev => prev.filter(i => i.id !== item.id));
recentlyRemovedRef.current.add(item.id);
return;
} catch (error: any) {
@@ -1149,10 +1154,9 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
description: `Successfully processed ${submissionItems.length} item(s)`,
});
// Silent cleanup after delay
setTimeout(() => {
fetchItems(activeEntityFilter, activeStatusFilter, true);
}, 2000);
// Optimistic update - remove from queue
setItems(prev => prev.filter(i => i.id !== item.id));
recentlyRemovedRef.current.add(item.id);
return;
} else if (action === 'rejected') {
// Cascade rejection to all pending items
@@ -1225,10 +1229,11 @@ export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
return newNotes;
});
// Silent cleanup after delay
setTimeout(() => {
fetchItems(activeEntityFilter, activeStatusFilter, true);
}, 2000);
// Optimistic update - remove from queue if approved or rejected
if (action === 'approved' || action === 'rejected') {
setItems(prev => prev.filter(i => i.id !== item.id));
recentlyRemovedRef.current.add(item.id);
}
} catch (error: any) {
console.error('Error moderating content:', error);