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 { getBannerUrls } from '@/lib/cloudflareImageUtils';
@@ -17,9 +17,12 @@ import { ParkLocationMap } from '@/components/maps/ParkLocationMap';
import { EntityPhotoGallery } from '@/components/upload/EntityPhotoGallery';
import { supabase } from '@/integrations/supabase/client';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { RideForm } from '@/components/admin/RideForm';
import { ParkForm } from '@/components/admin/ParkForm';
import { AdminFormSkeleton } from '@/components/loading/PageSkeletons';
import { toast } from '@/hooks/use-toast';
// Lazy load admin forms
const RideForm = lazy(() => import('@/components/admin/RideForm').then(m => ({ default: m.RideForm })));
const ParkForm = lazy(() => import('@/components/admin/ParkForm').then(m => ({ default: m.ParkForm })));
import { getErrorMessage } from '@/lib/errorHandler';
import { useUserRole } from '@/hooks/useUserRole';
import { Edit } from 'lucide-react';
@@ -640,10 +643,12 @@ export default function ParkDetail() {
Submit a new ride for moderation. All submissions are reviewed before being published.
</DialogDescription>
</DialogHeader>
<RideForm
onSubmit={handleRideSubmit}
onCancel={() => setIsAddRideModalOpen(false)}
/>
<Suspense fallback={<AdminFormSkeleton />}>
<RideForm
onSubmit={handleRideSubmit}
onCancel={() => setIsAddRideModalOpen(false)}
/>
</Suspense>
</DialogContent>
</Dialog>
@@ -656,28 +661,30 @@ export default function ParkDetail() {
Make changes to the park information. {isModerator() ? 'Changes will be applied immediately.' : 'Your changes will be submitted for review.'}
</DialogDescription>
</DialogHeader>
<ParkForm
onSubmit={handleEditParkSubmit}
onCancel={() => setIsEditParkModalOpen(false)}
initialData={{
id: park?.id,
name: park?.name,
slug: park?.slug,
description: park?.description,
park_type: park?.park_type,
status: park?.status,
opening_date: park?.opening_date,
closing_date: park?.closing_date,
website_url: park?.website_url,
phone: park?.phone,
email: park?.email,
operator_id: park?.operator?.id,
property_owner_id: park?.property_owner?.id,
banner_image_url: park?.banner_image_url,
card_image_url: park?.card_image_url
}}
isEditing={true}
/>
<Suspense fallback={<AdminFormSkeleton />}>
<ParkForm
onSubmit={handleEditParkSubmit}
onCancel={() => setIsEditParkModalOpen(false)}
initialData={{
id: park?.id,
name: park?.name,
slug: park?.slug,
description: park?.description,
park_type: park?.park_type,
status: park?.status,
opening_date: park?.opening_date,
closing_date: park?.closing_date,
website_url: park?.website_url,
phone: park?.phone,
email: park?.email,
operator_id: park?.operator?.id,
property_owner_id: park?.property_owner?.id,
banner_image_url: park?.banner_image_url,
card_image_url: park?.card_image_url
}}
isEditing={true}
/>
</Suspense>
</DialogContent>
</Dialog>
</main>