Refactor: Implement Code Splitting

src/components/upload/EntityImageUploader.tsx

@@ -4,7 +4,7 @@ import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Image as ImageIcon, ImagePlus, X } from 'lucide-react';
-import { UppyPhotoUpload } from './UppyPhotoUpload';
+import { UppyPhotoUploadLazy } from './UppyPhotoUploadLazy';
 import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
 
 export type ImageType = 'logo' | 'banner' | 'card';
@@ -125,7 +125,7 @@ export function EntityImageUploader({
               </Button>
             </div>
             <p className="text-sm text-muted-foreground">{spec.description}</p>
-            <UppyPhotoUpload
+            <UppyPhotoUploadLazy
               onUploadComplete={(urls) => handleUploadComplete(type, urls)}
               maxFiles={1}
               variant="compact"

src/components/upload/UppyPhotoSubmissionUpload.tsx

@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 import { Progress } from '@/components/ui/progress';
-import { UppyPhotoUpload } from './UppyPhotoUpload';
+import { UppyPhotoUploadLazy } from './UppyPhotoUploadLazy';
 import { PhotoCaptionEditor, PhotoWithCaption } from './PhotoCaptionEditor';
 import { supabase } from '@/integrations/supabase/client';
 import { useAuth } from '@/hooks/useAuth';
@@ -340,7 +340,7 @@ export function UppyPhotoSubmissionUpload({
               </Badge>
             )}
           </div>
-          <UppyPhotoUpload
+          <UppyPhotoUploadLazy
             onFilesSelected={handleFilesSelected}
             deferUpload={true}
             maxFiles={10}

src/components/upload/UppyPhotoSubmissionUploadLazy.tsx

@@ -0,0 +1,15 @@
+import { lazy, Suspense } from 'react';
+import { UploadPlaceholder } from '@/components/loading/PageSkeletons';
+import { UppyPhotoSubmissionUploadProps } from '@/types/submissions';
+
+const UppyPhotoSubmissionUpload = lazy(() => 
+  import('./UppyPhotoSubmissionUpload').then(module => ({ default: module.UppyPhotoSubmissionUpload }))
+);
+
+export function UppyPhotoSubmissionUploadLazy(props: UppyPhotoSubmissionUploadProps) {
+  return (
+    <Suspense fallback={<UploadPlaceholder />}>
+      <UppyPhotoSubmissionUpload {...props} />
+    </Suspense>
+  );
+}

src/components/upload/UppyPhotoUploadLazy.tsx

@@ -0,0 +1,35 @@
+import { lazy, Suspense } from 'react';
+import { UploadPlaceholder } from '@/components/loading/PageSkeletons';
+import React from 'react';
+
+const UppyPhotoUpload = lazy(() => 
+  import('./UppyPhotoUpload').then(module => ({ default: module.UppyPhotoUpload }))
+);
+
+export interface UppyPhotoUploadLazyProps {
+  onUploadComplete?: (urls: string[]) => void;
+  onFilesSelected?: (files: File[]) => void;
+  onUploadStart?: () => void;
+  onUploadError?: (error: Error) => void;
+  maxFiles?: number;
+  maxSizeMB?: number;
+  allowedFileTypes?: string[];
+  metadata?: Record<string, any>;
+  variant?: string;
+  className?: string;
+  children?: React.ReactNode;
+  disabled?: boolean;
+  showPreview?: boolean;
+  size?: 'default' | 'compact' | 'large';
+  enableDragDrop?: boolean;
+  showUploadModal?: boolean;
+  deferUpload?: boolean;
+}
+
+export function UppyPhotoUploadLazy(props: UppyPhotoUploadLazyProps) {
+  return (
+    <Suspense fallback={<UploadPlaceholder />}>
+      <UppyPhotoUpload {...props} />
+    </Suspense>
+  );
+}