refactor: InnovationSwiper lazy loading

Author: wackerow

app/[locale]/10years/_components/InnovationSwiper.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { Image } from "@/components/Image"
+import {
+  Swiper,
+  SwiperContainer,
+  SwiperNavigation,
+  SwiperSlide,
+} from "@/components/ui/swiper"
+
+import type { InnovationCard } from "../types"
+
+type InnovationSwiperProps = {
+  innovationCards: InnovationCard[]
+}
+const InnovationSwiper = ({ innovationCards }: InnovationSwiperProps) => (
+  <div className="w-[100%]">
+    <SwiperContainer className="mx-auto w-full max-w-[550px] xl:max-w-[700px]">
+      <Swiper
+        className="mx-auto w-full max-w-[550px] xl:max-w-[700px]"
+        spaceBetween={32}
+      >
+        {innovationCards.map(
+          ({ image, title, date, description1, description2 }, index) => (
+            <SwiperSlide
+              key={index}
+              className="mx-auto flex w-full max-w-[550px] flex-col gap-4 rounded-lg bg-card-gradient-secondary p-4 sm:p-6 xl:max-w-[700px]"
+            >
+              <Image
+                src={image}
+                alt={title}
+                className="mx-auto my-4 h-auto max-h-48 object-contain"
+              />
+              <div>
+                <h3 className="mb-4">{title}</h3>
+                <p className="text-body-secondary mb-4">{date}</p>
+              </div>
+              <p className="mb-4">{description1}</p>
+              <p className="mb-4">{description2}</p>
+            </SwiperSlide>
+          )
+        )}
+        <SwiperNavigation />
+      </Swiper>
+    </SwiperContainer>
+  </div>
+)
+
+export default InnovationSwiper

app/[locale]/10years/_components/InnovationSwiper/client.tsx

@@ -0,0 +1,28 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+const Loading = () => (
+  <div className="flex w-full flex-col items-center gap-6">
+    <div className="flex w-full max-w-[550px] flex-col gap-6 rounded-lg bg-card-gradient-secondary p-4 sm:p-6 xl:max-w-[700px]">
+      <Skeleton className="mx-auto size-48 rounded-4xl" />
+      <Skeleton className="h-8 w-1/2" />
+      <Skeleton className="h-5 w-1/4" />
+      <div className="space-y-1">
+        <Skeleton className="h-5 w-[85%] md:hidden" />
+        <Skeleton className="h-5 w-[95%]" />
+        <Skeleton className="h-5 w-full" />
+        <Skeleton className="h-5 w-[90%]" />
+        <Skeleton className="h-5 w-1/2" />
+      </div>
+      <div className="space-y-1">
+        <Skeleton className="h-5 w-[92%] md:hidden" />
+        <Skeleton className="h-5 w-[90%]" />
+        <Skeleton className="h-5 w-full" />
+        <Skeleton className="h-5 w-[95%]" />
+        <Skeleton className="h-5 w-1/3" />
+      </div>
+    </div>
+    <Skeleton className="h-6 w-40 rounded-full" />
+  </div>
+)
+
+export default Loading

app/[locale]/10years/_components/InnovationSwiper/loading.tsx

@@ -0,0 +1,8 @@
+import dynamic from "next/dynamic"
+
+import Loading from "./loading"
+
+export default dynamic(() => import("./client"), {
+  ssr: false,
+  loading: Loading,
+})