<suspense> added to LocationEditPage

app/location/[id]/edit/LocationEditPage.tsx

@@ -0,0 +1,16 @@
+import { notFound } from 'next/navigation';
+import { LocationEditForm } from '@/app/ui/LocationEditForm';
+import { fetchLocationById } from '@/app/lib/actions/locationActions';
+
+export default async function LocationEditPage({ locationId }: { locationId:string }) {
+
+    const location = await fetchLocationById(locationId);
+
+    if (!location) {
+        return(notFound());
+    }
+
+    const result = <LocationEditForm location={location} yearMonth={location.yearMonth} />;
+    
+    return (result);
+}

app/location/[id]/edit/page.tsx

@@ -1,13 +1,15 @@
-import { notFound } from 'next/navigation';
-import { LocationEditForm } from '@/app/ui/LocationEditForm';
-import { fetchLocationById } from '@/app/lib/actions/locationActions';
+import { Suspense } from 'react';
+import LocationEditPage from './LocationEditPage';
+import { Main } from '@/app/ui/Main';
+import { LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
 
-    const location = await fetchLocationById(id);
-
-    if (!location) {
-        return(notFound());
-    }
-    return (<LocationEditForm location={location} yearMonth={location.yearMonth} />);
+    return (
+        <Main>
+            <Suspense fallback={<LocationEditFormSkeleton />}>
+                <LocationEditPage  locationId={id} />
+            </Suspense>
+        </Main>
+    );
 }