added suspense for home page

app/ui/MonthCardSceleton.tsx

@@ -0,0 +1,32 @@
+import { Cog8ToothIcon, PlusCircleIcon } from "@heroicons/react/24/outline";
+import React from "react"
+
+const LocationCardSkeleton: React.FC = () =>
+<div className={`skeleton card card-compact card-bordered max-w-[30em] bg-base-100 shadow-s my-1`}>
+    <div className="card-body">
+        <h2 className="card-title mr-[2em]"></h2>
+    </div>
+</div>;
+
+export interface MonthCardSkeletonProps {
+    checked?: boolean;
+}
+
+export const MonthCardSkeleton: React.FC<MonthCardSkeletonProps> = ({checked=false}) =>
+    <div className={`skeleton collapse collapse-plus bg-base-200 my-1`}>
+      <input type="checkbox" name="my-accordion-3" checked={checked} disabled />
+      <div className="collapse-title text-xl font-medium w-[15em]">
+      </div>
+      <div className="collapse-content">
+        <LocationCardSkeleton />
+        <LocationCardSkeleton />
+      </div>
+    </div>;
+
+
+export const HomePageSkeleton: React.FC = () =>
+<>
+    <MonthCardSkeleton checked={true} />
+    <MonthCardSkeleton />
+    <MonthCardSkeleton />
+</>;