Added suspense to LocationAddPage and LocationDetelePage

app/location/[id]/add/LocationAddPage.tsx

@@ -0,0 +1,9 @@
+import { notFound } from 'next/navigation';
+import { LocationEditForm } from '@/app/ui/LocationEditForm';
+import { fetchLocationById } from '@/app/lib/actions/locationActions';
+import { YearMonth } from '@/app/lib/db-types';
+import { Main } from '@/app/ui/Main';
+
+export default async function LocationAddPage({ yearMonth }: { yearMonth:YearMonth }) {
+    return (<LocationEditForm yearMonth={yearMonth} />);
+}

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

@@ -1,6 +1,15 @@
 import { parseYearMonth } from '@/app/lib/format';
-import { LocationEditForm } from '@/app/ui/LocationEditForm';
+import { LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
+import LocationAddPage from './LocationAddPage';
+import { Main } from '@/app/ui/Main';
+import { Suspense } from 'react';
 
 export default async function Page({ params:{ id } }: { params: { id:string } }) {
-    return (<LocationEditForm yearMonth={ parseYearMonth(id) } />);
+    return (
+        <Main>
+            <Suspense fallback={<LocationEditFormSkeleton />}>
+                <LocationAddPage yearMonth={ parseYearMonth(id) } />
+            </Suspense>
+        </Main>
+    );
 }