diff --git a/src/components/moderation/DetailedViewCollapsible.tsx b/src/components/moderation/DetailedViewCollapsible.tsx index 9e778cca..7868603c 100644 --- a/src/components/moderation/DetailedViewCollapsible.tsx +++ b/src/components/moderation/DetailedViewCollapsible.tsx @@ -10,6 +10,7 @@ interface DetailedViewCollapsibleProps { children: React.ReactNode; fieldCount?: number; className?: string; + staggerIndex?: number; } /** @@ -21,8 +22,11 @@ export function DetailedViewCollapsible({ onToggle, children, fieldCount, - className + className, + staggerIndex = 0 }: DetailedViewCollapsibleProps) { + // Calculate stagger delay: 50ms per item, max 300ms + const staggerDelay = Math.min(staggerIndex * 50, 300); return ( onToggle()}>
@@ -59,7 +63,13 @@ export function DetailedViewCollapsible({ - + {children}
diff --git a/src/components/moderation/SubmissionItemsList.tsx b/src/components/moderation/SubmissionItemsList.tsx index 85ab1b3b..b85c67a6 100644 --- a/src/components/moderation/SubmissionItemsList.tsx +++ b/src/components/moderation/SubmissionItemsList.tsx @@ -135,7 +135,7 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({ } // Render item with appropriate display component - const renderItem = (item: SubmissionItemData) => { + const renderItem = (item: SubmissionItemData, index: number = 0) => { // SubmissionItemData from submissions.ts has item_data property const entityData = item.item_data; const actionType = item.action_type || 'create'; @@ -201,6 +201,7 @@ export const SubmissionItemsList = memo(function SubmissionItemsList({ isCollapsed={isCollapsed} onToggle={toggle} fieldCount={countFields(entityData)} + staggerIndex={index} > ( + {items.map((item, index) => (
- {renderItem(item)} + {renderItem(item, index)}
))}