Added suspense to LocationAddPage and LocationDetelePage

app/location/[id]/delete/LocationDeletePage.tsx

@@ -0,0 +1,14 @@
+import { notFound } from 'next/navigation';
+import { fetchLocationById } from '@/app/lib/actions/locationActions';
+import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm';
+
+export const LocationDeletePage = async ({ locationId }: { locationId:string }) => {
+
+    const location = await fetchLocationById(locationId);
+
+    if (!location) {
+        return(notFound());
+    }
+
+    return (<LocationDeleteForm location={location} />);
+}

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

@@ -1,14 +1,17 @@
 import { notFound } from 'next/navigation';
 import { fetchLocationById } from '@/app/lib/actions/locationActions';
 import { LocationDeleteForm } from '@/app/ui/LocationDeleteForm';
+import { Main } from '@/app/ui/Main';
+import { Suspense } from 'react';
+import { LocationDeletePage } from './LocationDeletePage';
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
 
-    const location = await fetchLocationById(id);
-
-    if (!location) {
-        return(notFound());
-    }
-
-    return (<LocationDeleteForm location={location} />);
+    return (
+        <Main>
+            <Suspense fallback={<div>Loading...</div>}>
+                <LocationDeletePage locationId={id} />
+            </Suspense>
+        </Main>
+    );
 }