feat: Lazy load admin forms

This commit is contained in:
gpt-engineer-app[bot]
2025-10-21 18:43:38 +00:00
parent 70a8534da7
commit 6a70267a57
9 changed files with 358 additions and 222 deletions

View File

@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, lazy, Suspense } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Header } from '@/components/layout/Header';
import { getBannerUrls } from '@/lib/cloudflareImageUtils';
@@ -7,11 +7,14 @@ import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Dialog, DialogContent } from '@/components/ui/dialog';
import { AdminFormSkeleton } from '@/components/loading/PageSkeletons';
import { ArrowLeft, MapPin, Star, Globe, Calendar, Edit, Ruler } from 'lucide-react';
import { Company } from '@/types/database';
import { supabase } from '@/integrations/supabase/client';
import { DesignerForm } from '@/components/admin/DesignerForm';
import { DesignerPhotoGallery } from '@/components/companies/DesignerPhotoGallery';
// Lazy load admin form
const DesignerForm = lazy(() => import('@/components/admin/DesignerForm').then(m => ({ default: m.DesignerForm })));
import { useAuth } from '@/hooks/useAuth';
import { useUserRole } from '@/hooks/useUserRole';
import { toast } from '@/hooks/use-toast';
@@ -337,23 +340,25 @@ export default function DesignerDetail() {
{/* Edit Modal */}
<Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
<DesignerForm
initialData={{
id: designer.id,
name: designer.name,
slug: designer.slug,
description: designer.description,
company_type: 'designer',
person_type: (designer.person_type || 'company') as 'company' | 'individual' | 'firm' | 'organization',
website_url: designer.website_url,
founded_year: designer.founded_year,
headquarters_location: designer.headquarters_location,
banner_image_url: designer.banner_image_url,
card_image_url: designer.card_image_url
}}
onSubmit={handleEditSubmit}
onCancel={() => setIsEditModalOpen(false)}
/>
<Suspense fallback={<AdminFormSkeleton />}>
<DesignerForm
initialData={{
id: designer.id,
name: designer.name,
slug: designer.slug,
description: designer.description,
company_type: 'designer',
person_type: (designer.person_type || 'company') as 'company' | 'individual' | 'firm' | 'organization',
website_url: designer.website_url,
founded_year: designer.founded_year,
headquarters_location: designer.headquarters_location,
banner_image_url: designer.banner_image_url,
card_image_url: designer.card_image_url
}}
onSubmit={handleEditSubmit}
onCancel={() => setIsEditModalOpen(false)}
/>
</Suspense>
</DialogContent>
</Dialog>
</div>