Fix admin page flashing

src/components/moderation/SubmissionItemsList.tsx

@@ -1,10 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, memo } from 'react';
 import { supabase } from '@/integrations/supabase/client';
 import { SubmissionChangesDisplay } from './SubmissionChangesDisplay';
 import { PhotoSubmissionDisplay } from './PhotoSubmissionDisplay';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Alert, AlertDescription } from '@/components/ui/alert';
-import { AlertCircle } from 'lucide-react';
+import { AlertCircle, Loader2 } from 'lucide-react';
 import type { SubmissionItemData } from '@/types/submissions';
 
 interface SubmissionItemsListProps {
@@ -13,7 +13,7 @@ interface SubmissionItemsListProps {
   showImages?: boolean;
 }
 
-export function SubmissionItemsList({ 
+export const SubmissionItemsList = memo(function SubmissionItemsList({
   submissionId, 
   view = 'summary',
   showImages = true 
@@ -21,6 +21,7 @@ export function SubmissionItemsList({
   const [items, setItems] = useState<SubmissionItemData[]>([]);
   const [hasPhotos, setHasPhotos] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -29,7 +30,12 @@ export function SubmissionItemsList({
 
   const fetchSubmissionItems = async () => {
     try {
-      setLoading(true);
+      // Only show skeleton on initial load, show refreshing indicator on refresh
+      if (loading) {
+        setLoading(true);
+      } else {
+        setRefreshing(true);
+      }
       setError(null);
 
       // Fetch submission items
@@ -58,6 +64,7 @@ export function SubmissionItemsList({
       setError('Failed to load submission details');
     } finally {
       setLoading(false);
+      setRefreshing(false);
     }
   };
 
@@ -89,6 +96,13 @@ export function SubmissionItemsList({
 
   return (
     <div className="flex flex-col gap-3">
+      {refreshing && (
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <Loader2 className="h-3 w-3 animate-spin" />
+          <span>Refreshing...</span>
+        </div>
+      )}
+      
       {/* Show regular submission items */}
       {items.map((item) => (
         <div key={item.id} className={view === 'summary' ? 'border-l-2 border-primary/20 pl-3' : ''}>
@@ -109,4 +123,4 @@ export function SubmissionItemsList({
       )}
     </div>
   );
-}
+});