better lazy loading

app/(app)/app/_sections/LiveStreaming.tsx

@@ -30,36 +30,7 @@ export default function LiveStreamingSection() {
   });
 
   const processedEvents = uniqBy((e) => getTagValues("title", e.tags), events);
-  const demo = [
+  console.log(events);
-    {
-      id: 1,
-      title: "BTC Radio",
-      picture:
-        "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/51602.original.png?1693358530",
-      tags: ["music", "crypto", "art"],
-    },
-    {
-      id: 2,
-      title: "The Book of Alpha: NFTs and crypto taking over. Market Talk",
-      picture:
-        "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/31095.thumbnail.png?1692203850",
-      tags: ["NFTs", "crypto", "art", "trading"],
-    },
-    {
-      id: 3,
-      title: "Space Talk: What's Elon up to?",
-      picture:
-        "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/40088.original.png?1692206315",
-      tags: ["Space"],
-    },
-    {
-      id: 4,
-      title: "The Book of Alpha: NFTs and crypto taking over. Market Talk",
-      picture:
-        "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/40680.original.png?1692206434",
-      tags: ["Market"],
-    },
-  ];
   return (
     <Section className="max-sm:-mx-5">
       <SectionHeader>
@@ -85,10 +56,12 @@ export default function LiveStreamingSection() {
                   const title = getTagValues("title", event.tags) as string;
                   const starts = getTagValues("starts", event.tags) as string;
                   const tags = getTagsValues("t", event.tags) as string[];
-                  const total_participants = getTagValues(
+                  const total_participants =
-                    "total_participants",
+                    getTagValues("total_participants", event.tags) ??
-                    event.tags,
+                    (getTagValues(
-                  ) as string;
+                      "current_participants",
+                      event.tags,
+                    ) as string);
                   const status = getTagValues("status", event.tags) as
                     | "live"
                     | "planned"

app/(app)/app/page.tsx

@@ -1,9 +1,20 @@
+import dynamic from "next/dynamic";
 import ExploreCreators from "./_sections/ExploreCreators";
-import BecomeACreator from "./_sections/BecomeACreator";
-import LiveStreamingSection from "./_sections/LiveStreaming";
-import FeaturedListsSection from "./_sections/FeaturedLists";
 import LongFormContentSection from "./_sections/LongFormContent";
+import BecomeACreator from "./_sections/BecomeACreator";
 
+const LiveStreamingSection = dynamic(
+  () => import("./_sections/LiveStreaming"),
+  {
+    ssr: false,
+  },
+);
+const FeaturedListsSection = dynamic(
+  () => import("./_sections/FeaturedLists"),
+  {
+    ssr: false,
+  },
+);
 export default function Page() {
   return (
     <div className="relative space-y-6 pt-5 sm:pt-7">

components/KindCard/loading.tsx

@@ -6,7 +6,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 export default function KindLoading() {
   return (
     <Container>
-      <div className="space-y-2 text-muted-foreground">
+      <div className="mb-3 space-y-2 text-muted-foreground">
         <Skeleton className="mb-2 h-4 w-1/3 bg-muted" />
         <Skeleton className="h-4 w-1/2 bg-muted" />
         <Skeleton className="h-4 w-2/5 bg-muted" />

components/VideoCard/index.tsx

@@ -51,14 +51,14 @@ export default function VideoCard({ className, card }: VideoCardProps) {
       <div className="flex-1 space-y-2 text-base">
         <h3 className="line-clamp-2 font-medium leading-none">{card.title}</h3>
         <div className="flex items-center gap-x-3">
-          <div className="flex flex-col items-start">
+          <div className="flex flex-col items-start gap-y-1">
             {startTime && (
               <div className="center gap-x-1 text-xs text-muted-foreground">
                 <RxClock className="h-4 w-4 text-primary" />
                 <span>{formatDate(new Date(startTime), "h:m a")}</span>
               </div>
             )}
-            {card["total_participants"] && (
+            {!!card["total_participants"] && (
               <div className="center gap-x-1 text-xs text-muted-foreground">
                 <HiOutlineUsers className="h-4 w-4 text-primary" />
                 <span>{formatNumber(card["total_participants"])}</span>
@@ -90,7 +90,7 @@ export function VideoCardLoading({ className }: { className: string }) {
         <Skeleton className="mb-2 h-4 w-1/3 bg-muted" />
         <div className="flex flex-col items-start">
           <div className="center gap-x-1 text-xs text-muted-foreground">
-            <RxClock className="h-4 w-4 text-primary" />
+            <Skeleton className="h-3 w-3 bg-muted" />
             <Skeleton className="h-3 w-[50px] bg-muted" />
           </div>
         </div>