lazy load torch swiper

Author: pettinarip

app/[locale]/10years/_components/TorchHistorySwiper.tsx renamed to app/[locale]/10years/_components/TorchHistorySwiper/index.tsx

@@ -10,7 +10,7 @@ import {
   SwiperNavigation,
 } from "@/components/ui/swiper"
 
-import TorchHistoryCard from "./TorchHistoryCard"
+import TorchHistoryCard from "../TorchHistoryCard"
 
 import { getAvatarImage, type TorchHolderEvent } from "@/lib/torch"
 

app/[locale]/10years/_components/TorchHistorySwiper/lazy.tsx

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

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

@@ -0,0 +1,14 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+const Loading = () => (
+  <div className="flex w-full flex-col items-center gap-6">
+    <div className="flex w-full items-center justify-center gap-12">
+      <Skeleton className="h-[400px] w-[240px] rounded-4xl" />
+      <Skeleton className="h-[400px] w-[240px] rounded-4xl" />
+      <Skeleton className="h-[400px] w-[240px] rounded-4xl" />
+    </div>
+    <Skeleton className="h-6 w-40 rounded-full" />
+  </div>
+)
+
+export default Loading

app/[locale]/10years/page.tsx

@@ -31,7 +31,7 @@ import { adoptionStyles } from "./_components/data"
 import InnovationSwiper from "./_components/InnovationSwiper/lazy"
 import TenYearGlobe from "./_components/TenYearGlobe/lazy"
 import TenYearHero from "./_components/TenYearHero"
-import TorchHistorySwiper from "./_components/TorchHistorySwiper"
+import TorchHistorySwiper from "./_components/TorchHistorySwiper/lazy"
 import Stories from "./_components/UserStories/lazy"
 import {
   getAdoptionCards,