better loading state

app/(app)/explore/_components/CalendarCard.tsx

@@ -10,6 +10,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { BANNER } from "@/constants/app";
 import { getNameToShow } from "@/lib/utils";
@@ -18,6 +19,8 @@ import useProfile from "@/lib/hooks/useProfile";
 import useEvents from "@/lib/hooks/useEvents";
 import { getTagAllValues, getTagValues } from "@/lib/nostr/utils";
 import { useNDK } from "@/app/_providers/ndk";
+import { Skeleton } from "@/components/ui/skeleton";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
 
 type CalendarCardProps = {
   calendar: NDKEvent;
@@ -144,3 +147,43 @@ export default function CalendarCard({ calendar }: CalendarCardProps) {
     </Card>
   );
 }
+export function LoadingCalendarCard() {
+  const textColor = "bg-zinc-200";
+  return (
+    <Skeleton className="pointer-events-none relative h-[350px] w-[250px] min-w-[250px] overflow-hidden bg-muted">
+      <div className="absolute inset-0  backdrop-blur-lg transition-all">
+        <div className="group relative flex h-full w-full flex-col items-center justify-end transition-all">
+          <CardHeader className="absolute inset-x-0 top-[59%] transform pt-4 text-center transition-all duration-300 group-hover:top-[8px] group-hover:ml-[75px] group-hover:text-left">
+            <Skeleton className={cn("mx-auto h-[20px] w-2/3", textColor)} />
+            <div className="center flex-col gap-y-2 pt-3">
+              <div className="center w-full gap-1">
+                <Skeleton className={cn("h-3 w-1/2", textColor)} />
+                <Skeleton className={cn("h-3 w-1/3", textColor)} />
+              </div>
+              <div className="center w-full gap-1">
+                <Skeleton className={cn("h-3 w-1/5", textColor)} />
+                <Skeleton className={cn("h-3 w-2/5", textColor)} />
+              </div>
+              <Skeleton className={cn("h-3 w-1/2", textColor)} />
+            </div>
+          </CardHeader>
+          <div className="absolute left-1/2 top-1/2 aspect-square h-[100px] -translate-x-1/2 -translate-y-[70%] transform overflow-hidden rounded-lg bg-muted object-cover transition-all duration-300 group-hover:left-[50px] group-hover:top-[65px] group-hover:w-[70px]">
+            <Skeleton className={cn("aspect-square h-[100px]", textColor)} />
+          </div>
+          <Card className="absolute top-full min-h-full w-5/6 overflow-hidden transition-all duration-300 group-hover:top-1/3">
+            <CardHeader className="border-b p-4 pb-3">
+              <CardTitle>Upcoming Events:</CardTitle>
+            </CardHeader>
+            <CardContent className="overflow-hidden px-0">
+              <ul className="w-full">
+                <li className="w-full overflow-hidden">
+                  <Skeleton className="h-3 w-2/3" />
+                </li>
+              </ul>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </Skeleton>
+  );
+}

app/(app)/explore/_sections/ExploreCalendars.tsx

@@ -11,7 +11,7 @@ import { getTagValues } from "@/lib/nostr/utils";
 import { NDKEvent, NDKKind, NDKUserProfile } from "@nostr-dev-kit/ndk";
 import { useNDK } from "@nostr-dev-kit/ndk-react";
 
-import CalendarCard from "../_components/CalendarCard";
+import CalendarCard, { LoadingCalendarCard } from "../_components/CalendarCard";
 export default function ExploreCalendars() {
   return (
     <section className="relative -mx-5 space-y-4 overflow-x-hidden sm:space-y-6">
@@ -35,14 +35,30 @@ function HorizontalCarousel() {
       limit: 5,
     },
   });
+
+  if (events.length) {
+    return (
+      <div className="scrollbar-thumb-rounded-full mr-auto flex min-w-0 max-w-full snap-x snap-mandatory overflow-x-auto pl-5 pr-[50vw] scrollbar-thin sm:pr-[200px]">
+        {events.map((calendar, index) => (
+          <div
+            key={index}
+            className={cn("snap-start pl-2 sm:pl-5", index === 0 && "pl-5")}
+          >
+            <Calendar encodedEvent={calendar.encode()} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
   return (
     <div className="scrollbar-thumb-rounded-full mr-auto flex min-w-0 max-w-full snap-x snap-mandatory overflow-x-auto pl-5 pr-[50vw] scrollbar-thin sm:pr-[200px]">
-      {events.map((calendar, index) => (
+      {Array.from(Array(5)).map((_, index) => (
         <div
           key={index}
           className={cn("snap-start pl-2 sm:pl-5", index === 0 && "pl-5")}
         >
-          <Calendar encodedEvent={calendar.encode()} />
+          <LoadingCalendarCard />
         </div>
       ))}
     </div>