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';
@@ -9,6 +9,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Separator } from '@/components/ui/separator';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { AdminFormSkeleton } from '@/components/loading/PageSkeletons';
import {
MapPin,
Star,
@@ -41,8 +42,10 @@ import { RecentPhotosPreview } from '@/components/rides/RecentPhotosPreview';
import { ParkLocationMap } from '@/components/maps/ParkLocationMap';
import { Ride } from '@/types/database';
import { supabase } from '@/integrations/supabase/client';
import { RideForm } from '@/components/admin/RideForm';
import { useAuth } from '@/hooks/useAuth';
// Lazy load admin forms
const RideForm = lazy(() => import('@/components/admin/RideForm').then(m => ({ default: m.RideForm })));
import { useUserRole } from '@/hooks/useUserRole';
import { toast } from '@/hooks/use-toast';
import { getErrorMessage } from '@/lib/errorHandler';
@@ -729,41 +732,43 @@ export default function RideDetail() {
: "Submit changes to this ride for review. A moderator will review your submission."}
</DialogDescription>
</DialogHeader>
{ride && (
<RideForm
initialData={{
id: ride.id,
name: ride.name,
slug: ride.slug,
description: ride.description,
category: ride.category,
ride_sub_type: ride.ride_sub_type,
status: ride.status as "operating" | "closed_permanently" | "closed_temporarily" | "under_construction" | "relocated" | "stored" | "demolished",
opening_date: ride.opening_date,
closing_date: ride.closing_date,
height_requirement: ride.height_requirement,
age_requirement: ride.age_requirement,
capacity_per_hour: ride.capacity_per_hour,
duration_seconds: ride.duration_seconds,
max_speed_kmh: ride.max_speed_kmh,
max_height_meters: ride.max_height_meters,
length_meters: ride.length_meters,
inversions: ride.inversions,
coaster_type: ride.coaster_type,
seating_type: ride.seating_type,
intensity_level: ride.intensity_level,
drop_height_meters: ride.drop_height_meters,
max_g_force: ride.max_g_force,
manufacturer_id: ride.manufacturer?.id,
ride_model_id: ride.ride_model?.id,
banner_image_url: ride.banner_image_url,
card_image_url: ride.card_image_url
}}
onSubmit={handleEditSubmit}
onCancel={() => setIsEditModalOpen(false)}
isEditing={true}
/>
)}
<Suspense fallback={<AdminFormSkeleton />}>
{ride && (
<RideForm
initialData={{
id: ride.id,
name: ride.name,
slug: ride.slug,
description: ride.description,
category: ride.category,
ride_sub_type: ride.ride_sub_type,
status: ride.status as "operating" | "closed_permanently" | "closed_temporarily" | "under_construction" | "relocated" | "stored" | "demolished",
opening_date: ride.opening_date,
closing_date: ride.closing_date,
height_requirement: ride.height_requirement,
age_requirement: ride.age_requirement,
capacity_per_hour: ride.capacity_per_hour,
duration_seconds: ride.duration_seconds,
max_speed_kmh: ride.max_speed_kmh,
max_height_meters: ride.max_height_meters,
length_meters: ride.length_meters,
inversions: ride.inversions,
coaster_type: ride.coaster_type,
seating_type: ride.seating_type,
intensity_level: ride.intensity_level,
drop_height_meters: ride.drop_height_meters,
max_g_force: ride.max_g_force,
manufacturer_id: ride.manufacturer?.id,
ride_model_id: ride.ride_model?.id,
banner_image_url: ride.banner_image_url,
card_image_url: ride.card_image_url
}}
onSubmit={handleEditSubmit}
onCancel={() => setIsEditModalOpen(false)}
isEditing={true}
/>
)}
</Suspense>
</DialogContent>
</Dialog>
</main>