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, useCallback } from 'react';
import { useState, useEffect, useCallback, lazy, Suspense } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Header } from '@/components/layout/Header';
import { Button } from '@/components/ui/button';
@@ -6,6 +6,7 @@ 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, FerrisWheel, Building2, Edit } from 'lucide-react';
import { RideModel, Ride, Company } from '@/types/database';
import { supabase } from '@/integrations/supabase/client';
@@ -15,8 +16,10 @@ import { useAuthModal } from '@/hooks/useAuthModal';
import { useAuth } from '@/hooks/useAuth';
import { toast } from '@/hooks/use-toast';
import { getErrorMessage } from '@/lib/errorHandler';
import { RideModelForm } from '@/components/admin/RideModelForm';
import { ManufacturerPhotoGallery } from '@/components/companies/ManufacturerPhotoGallery';
// Lazy load admin form
const RideModelForm = lazy(() => import('@/components/admin/RideModelForm').then(m => ({ default: m.RideModelForm })));
import { VersionIndicator } from '@/components/versioning/VersionIndicator';
import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
@@ -335,22 +338,24 @@ export default function RideModelDetail() {
{/* Edit Modal */}
<Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
<RideModelForm
manufacturerName={manufacturer.name}
manufacturerId={manufacturer.id}
initialData={{
id: model.id,
name: model.name,
slug: model.slug,
category: model.category,
ride_type: model.ride_type,
description: model.description,
banner_image_url: model.banner_image_url,
card_image_url: model.card_image_url,
}}
onSubmit={handleEditSubmit}
onCancel={() => setIsEditModalOpen(false)}
/>
<Suspense fallback={<AdminFormSkeleton />}>
<RideModelForm
manufacturerName={manufacturer.name}
manufacturerId={manufacturer.id}
initialData={{
id: model.id,
name: model.name,
slug: model.slug,
category: model.category,
ride_type: model.ride_type,
description: model.description,
banner_image_url: model.banner_image_url,
card_image_url: model.card_image_url,
}}
onSubmit={handleEditSubmit}
onCancel={() => setIsEditModalOpen(false)}
/>
</Suspense>
</DialogContent>
</Dialog>
</main>