196 - Temporarily loading style for the event page

src/app/(pages)/events/_components/EventsLoading.tsx

@@ -0,0 +1,23 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function EventCardLoading() {
+  return new Array(2).fill('').map(id => (
+    <div
+      key={id}
+      className="relative mt-12 flex w-full max-w-md transform flex-col overflow-hidden rounded-[30px] shadow-md"
+    >
+      <div className="relative w-full overflow-hidden md:h-64">
+        <div className="max-h-full overflow-hidden">
+          <Skeleton className="h-[250px] w-[400px] rounded-lg md:h-[400px]" />
+        </div>
+      </div>
+      <div className="flex flex-col items-center justify-center p-4 text-center md:p-6">
+        <Skeleton className="mb-1 h-[28px] w-full font-bold md:mb-3" />
+        <Skeleton className="my-1 h-1 w-full md:my-3" />
+        <Skeleton className="h-[28px] w-full md:py-2" />
+        <Skeleton className="h-[24px] w-full md:py-2" />
+        <Skeleton className="h-[84px] w-full md:py-2" />
+      </div>
+    </div>
+  ));
+}

src/app/(pages)/events/page.tsx

@@ -1,32 +1,39 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import EventCard from './_components/EventCard';
 import { getEvents } from '@/lib/notion/events';
 import BlockContainer from '@/components/BlockContainer';
+import EventCardLoading from './_components/EventsLoading';
 
 export const revalidate = Number(process.env.REVALIDATION_INTERVAL) || 3600;
 
 const EventsPage: React.FC = async () => {
-  const res = await getEvents();
   return (
     <div className="flex justify-center bg-blueprint-50">
       <BlockContainer title="Blueprint Events" roundedCorners inner centered margin>
         <div className="grid grid-cols-1 gap-4 px-4 sm:grid-cols-2 sm:px-16 lg:grid-cols-3 lg:px-12">
-          {res.map(event => (
-            <EventCard
-              slug={event.slug}
-              key={event.eventName}
-              title={event.eventName}
-              venue={event.venue}
-              time={event.date}
-              description={event.description}
-              isUpcoming={event.status === 'Scheduled'}
-              imageURL={event.imageURL}
-            />
-          ))}
+          <Suspense fallback={<EventCardLoading />}>
+            <Events />
+          </Suspense>
         </div>
       </BlockContainer>
     </div>
   );
 };
 
+async function Events() {
+  const res = await getEvents();
+  return res.map(event => (
+    <EventCard
+      slug={event.slug}
+      key={event.eventName}
+      title={event.eventName}
+      venue={event.venue}
+      time={event.date}
+      description={event.description}
+      isUpcoming={event.status === 'Scheduled'}
+      imageURL={event.imageURL}
+    />
+  ));
+}
+
 export default EventsPage;

src/app/(pages)/home/_components/EventsBlock.tsx

@@ -3,13 +3,12 @@ import EventCard from './EventCard';
 import { getFeaturedEvents } from '@/lib/notion/events';
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
 import { getFeaturedAnnouncements } from '@/lib/notion/announcements';
+import { Suspense } from 'react';
+import { HomeEventLoading } from './HomePageLoading';
 
 export const revalidate = Number(process.env.REVALIDATION_INTERVAL) || 3600;
 
-export default async function HomeEvents() {
-  const res = await getFeaturedEvents();
-  const news = await getFeaturedAnnouncements();
-
+export default function HomeEvents() {
   return (
     <BlockContainer title="News & Events" bg="light-blue" padding="less">
       <div className="-mx-6 flex justify-center px-4">
@@ -20,18 +19,9 @@ export default async function HomeEvents() {
           }}
           className="w-full"
         >
-          <CarouselContent className="px-1 py-4">
-            {news.map(announcement => (
-              <CarouselItem key={announcement.announcementPageId} className="md:basis-1/2 lg:basis-1/3">
-                <EventCard data={announcement} />
-              </CarouselItem>
-            ))}
-            {res.map(event => (
-              <CarouselItem key={event.eventPageId} className="md:basis-1/2 lg:basis-1/3">
-                <EventCard data={event} />
-              </CarouselItem>
-            ))}
-          </CarouselContent>
+          <Suspense fallback={<HomeEventLoading />}>
+            <Events />
+          </Suspense>
           <CarouselPrevious className="hidden md:inline-flex" />
           <CarouselNext className="hidden md:inline-flex" />
         </Carousel>
@@ -40,3 +30,23 @@ export default async function HomeEvents() {
     </BlockContainer>
   );
 }
+
+async function Events() {
+  const res = await getFeaturedEvents();
+  const news = await getFeaturedAnnouncements();
+
+  return (
+    <CarouselContent className="px-1 py-4">
+      {news.map(announcement => (
+        <CarouselItem key={announcement.announcementPageId} className="md:basis-1/2 lg:basis-1/3">
+          <EventCard data={announcement} />
+        </CarouselItem>
+      ))}
+      {res.map(event => (
+        <CarouselItem key={event.eventPageId} className="md:basis-1/2 lg:basis-1/3">
+          <EventCard data={event} />
+        </CarouselItem>
+      ))}
+    </CarouselContent>
+  );
+}

src/app/(pages)/home/_components/HomePageLoading.tsx

@@ -0,0 +1,36 @@
+import { CarouselContent, CarouselItem } from '@/components/ui/carousel';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function HomeProjectLoading() {
+  return (
+    <CarouselContent>
+      {new Array(3).fill('').map(id => (
+        <CarouselItem key={id} className="md:basis-1/2 lg:basis-1/3">
+          <div className="flex items-center justify-center">
+            <Skeleton className="h-[320px] w-[320px] rounded-[40px] md:h-80 md:w-80 lg:h-72 lg:w-72" />
+          </div>
+        </CarouselItem>
+      ))}
+    </CarouselContent>
+  );
+}
+
+export function HomeProjectLoadingMobile() {
+  return new Array(3).fill('').map(id => (
+    <div key={id} className="relative flex items-center justify-end">
+      <Skeleton className="relative h-24 w-full min-w-fit rounded-[35px] px-6" />
+    </div>
+  ));
+}
+
+export function HomeEventLoading() {
+  return (
+    <CarouselContent>
+      {new Array(3).fill('').map(id => (
+        <CarouselItem key={id} className="md:basis-1/2 lg:basis-1/3">
+          <Skeleton className="relative h-[18rem] min-w-fit rounded-[50px] md:h-[36rem]" />
+        </CarouselItem>
+      ))}
+    </CarouselContent>
+  );
+}

src/app/(pages)/home/_components/ProjectsBlock.tsx

@@ -4,11 +4,12 @@ import Link from 'next/link';
 import { MdDoubleArrow } from 'react-icons/md';
 import { getFeaturedProjects } from '@/lib/notion/projects';
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
+import { Suspense } from 'react';
+import { HomeProjectLoading, HomeProjectLoadingMobile } from './HomePageLoading';
 
 export const revalidate = Number(process.env.REVALIDATION_INTERVAL) || 3600;
 
 export default async function ProjectsBlock() {
-  const featuredProjects = await getFeaturedProjects();
   return (
     <BlockContainer title="Projects" padding="less">
       <div className="-mx-8 px-4 md:mx-auto">
@@ -19,20 +20,16 @@ export default async function ProjectsBlock() {
           }}
           className="hidden md:block"
         >
-          <CarouselContent>
-            {featuredProjects.map(project => (
-              <CarouselItem key={project.pageId} className="md:basis-1/2 lg:basis-1/3">
-                <ProjectCard data={project} />
-              </CarouselItem>
-            ))}
-          </CarouselContent>
+          <Suspense fallback={<HomeProjectLoading />}>
+            <ProjectCards />
+          </Suspense>
           <CarouselPrevious className="hidden md:inline-flex" />
           <CarouselNext className="hidden md:inline-flex" />
         </Carousel>
         <div className="space-y-8 md:hidden">
-          {featuredProjects.map(project => (
-            <ProjectCard key={project.pageId} data={project} mobile />
-          ))}
+          <Suspense fallback={<HomeProjectLoadingMobile />}>
+            <ProjectCardsMobile />
+          </Suspense>
         </div>
       </div>
       <div className="flex text-2xl">
@@ -49,3 +46,22 @@ export default async function ProjectsBlock() {
     </BlockContainer>
   );
 }
+
+async function ProjectCards() {
+  const featuredProjects = await getFeaturedProjects();
+  return (
+    <CarouselContent>
+      {featuredProjects.map(project => (
+        <CarouselItem key={project.pageId} className="md:basis-1/2 lg:basis-1/3">
+          <ProjectCard data={project} />
+        </CarouselItem>
+      ))}
+    </CarouselContent>
+  );
+}
+
+async function ProjectCardsMobile() {
+  const featuredProjects = await getFeaturedProjects();
+
+  return featuredProjects.map(project => <ProjectCard key={project.pageId} data={project} mobile />);
+}

src/app/(pages)/projects/_components/CurrentProjects.tsx

@@ -1,16 +1,10 @@
 import { v4 as uuidv4 } from 'uuid';
 import ProjectCard from './ProjectCard';
-import { ProjectDataType } from '@/lib/notion/projects';
-import BlockContainer from '@/components/BlockContainer';
+import { getProjects, isCurrentProject } from '@/lib/notion/projects';
+// import BlockContainer from '@/components/BlockContainer';
 
-export default async function CurrentProjects({ projects }: { projects: ProjectDataType[] }) {
-  return (
-    <BlockContainer title="Current Projects" roundedCorners="bottom" bg="light-blue" padding="less" gap="less">
-      <div className="-mx-4 flex flex-col items-center space-y-5">
-        {projects.map(project => (
-          <ProjectCard key={uuidv4()} data={project} />
-        ))}
-      </div>
-    </BlockContainer>
-  );
+export default async function CurrentProjects() {
+  const res = await getProjects();
+  const projects = res.filter(project => isCurrentProject(project));
+  return projects.map(project => <ProjectCard key={uuidv4()} data={project} />);
 }

src/app/(pages)/projects/_components/PastProjectCard.tsx

@@ -22,11 +22,13 @@ export default function PastProjectCard({ data }: { data: ProjectDataType }) {
               />
             </div>
           )}
-          <div className="flex flex-col items-center gap-4 text-center">
-            <CardTitle className="flex text-4xl text-white md:h-[80px] md:items-center">{data.companyName}</CardTitle>
-            <CardContent className="text-2xl text-white md:text-base">
-              <p className="hidden h-[100px] md:line-clamp-4">{data.description}</p>
-              <p className="block md:hidden">{data.productName}</p>
+          <div className="flex flex-col items-center text-center text-white">
+            <div className="flex h-[110px] flex-col items-center justify-center text-center">
+              <CardTitle className="-mx-2 flex text-4xl md:items-center">{data.companyName}</CardTitle>
+              <p className="font-semibold">{data.productName}</p>
+            </div>
+            <CardContent className="hidden text-2xl text-white md:block md:text-base">
+              <p className="h-[100px] md:line-clamp-4">{data.description}</p>
             </CardContent>
           </div>
         </div>

src/app/(pages)/projects/_components/PastProjects.tsx

@@ -1,16 +1,10 @@
 import { v4 as uuidv4 } from 'uuid';
 import PastProjectCard from './PastProjectCard';
-import { ProjectDataType } from '@/lib/notion/projects';
-import BlockContainer from '@/components/BlockContainer';
+import { getProjects, isCurrentProject } from '@/lib/notion/projects';
+// import BlockContainer from '@/components/BlockContainer';
 
-export default async function PastProjects({ projects }: { projects: ProjectDataType[] }) {
-  return (
-    <BlockContainer title="Past Projects" roundedCorners="top" bg="dark-blue" padding="less" gap="less">
-      <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3">
-        {projects.map(project => (
-          <PastProjectCard key={uuidv4()} data={project} />
-        ))}
-      </div>
-    </BlockContainer>
-  );
+export default async function PastProjects() {
+  const res = await getProjects();
+  const projects = res.filter(project => !isCurrentProject(project));
+  return projects.map(project => <PastProjectCard key={uuidv4()} data={project} />);
 }

src/app/(pages)/projects/_components/ProjectCardsLoading.tsx

@@ -0,0 +1,59 @@
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function ProjectCardSkeleton() {
+  return new Array(2).fill('').map(id => (
+    <>
+      <Card
+        key={id}
+        className="flex w-full items-center justify-center rounded-[40px] shadow-[2px_6px_4px_0px_rgba(0,0,0,0.25)] md:h-auto"
+      >
+        <div className="ml-8 hidden h-[200px] w-[250px] md:block">
+          <Skeleton className="h-full w-full" />
+        </div>
+
+        <div className="flex min-h-[320px] w-11/12 flex-col justify-end md:min-h-full md:justify-between">
+          <CardHeader className="flex flex-col items-start justify-between md:block md:items-center">
+            <CardTitle className="">
+              <Skeleton className="h-[80px] w-[220px] md:h-[50px] md:w-[500px]" />
+            </CardTitle>
+            <div className="flex w-full flex-row gap-2 md:items-center md:pt-0">
+              <Skeleton className="h-[150px] w-full md:h-[25px] md:w-[350px]" />
+              <div className="max-h-[120px] w-1/2 max-w-[120px] md:hidden">
+                <Skeleton className="h-[120px] w-[120px]" />
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="text-md mb-5 hidden overflow-hidden md:block md:h-24">
+            <Skeleton className="h-32 w-full" />
+          </CardContent>
+          <CardFooter className="justify-end space-x-4 pb-4 text-xs md:justify-start md:pb-6">
+            <Skeleton className="h-16 w-16 rounded-full" />
+            <Skeleton className="h-16 w-16 rounded-full" />
+          </CardFooter>
+        </div>
+      </Card>
+    </>
+  ));
+}
+
+export function PastProjectCardSkeleton() {
+  return new Array(3).fill('').map(id => (
+    <div className="relative" key={id}>
+      <div className="flex max-h-[500px] min-h-[400px] flex-col items-center justify-end rounded-[40px] bg-gradient-to-t from-[#0170DC] to-[#6191BC] p-4 transition-all duration-150 ease-in-out hover:outline hover:outline-4 hover:outline-white">
+        <div className="mb-4">
+          <Skeleton className="h-48 w-48" />
+        </div>
+        <div className="flex flex-col items-center">
+          <div className="flex h-[110px] flex-col items-center justify-center gap-2">
+            <Skeleton className="flex h-[50px] w-[250px] md:items-center" />
+            <Skeleton className="h-[20px] w-[250px]" />
+          </div>
+          <CardContent className="hidden md:block">
+            <Skeleton className="h-[100px] w-[250px]" />
+          </CardContent>
+        </div>
+      </div>
+    </div>
+  ));
+}