refactor: AdoptionSwiper lazy loading

Author: wackerow

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

@@ -0,0 +1,60 @@
+"use client"
+
+import { Image } from "@/components/Image"
+import Translation from "@/components/Translation"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+import {
+  Swiper,
+  SwiperContainer,
+  SwiperNavigation,
+  SwiperSlide,
+} from "@/components/ui/swiper"
+
+import { cn } from "@/lib/utils/cn"
+
+import { AdoptionCard } from "../types"
+
+type AdoptionCardProps = {
+  adoptionCards: AdoptionCard[]
+  adoptionStyles: string[]
+}
+
+const AdoptionSwiper = ({
+  adoptionCards,
+  adoptionStyles,
+}: AdoptionCardProps) => (
+  <div className="flex flex-1 flex-col gap-6 md:hidden">
+    <SwiperContainer className="mx-auto w-full max-w-[550px]">
+      <Swiper spaceBetween={32}>
+        {adoptionCards.map(({ image, linkText, href, title }, index) => {
+          return (
+            <SwiperSlide key={title}>
+              <div
+                className={cn("h-full rounded-2xl p-8", adoptionStyles[index])}
+              >
+                <Image
+                  src={image}
+                  alt={title}
+                  className="mx-auto mb-4 h-36 object-contain"
+                />
+                <h3 className="mb-4 text-2xl font-bold">{title}</h3>
+                <p className="mb-8">
+                  <Translation
+                    id={`page-10-year-adoption-card-${index + 1}-description`}
+                    ns="page-10-year-anniversary"
+                  />
+                </p>
+                <ButtonLink href={href} hideArrow variant="outline">
+                  {linkText}
+                </ButtonLink>
+              </div>
+            </SwiperSlide>
+          )
+        })}
+        <SwiperNavigation />
+      </Swiper>
+    </SwiperContainer>
+  </div>
+)
+
+export default AdoptionSwiper

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

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

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

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