Merge pull request #15774 from ethereum/perf-10yr

performance: 10 Year page priority/lazy loading adjustments

Author: corwintines

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/index.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/AdoptionSwiper/lazy.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,5 @@
+import dynamic from "next/dynamic"
+
+import Loading from "./loading"
+
+export default dynamic(() => import("."), { ssr: false, loading: Loading })

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

@@ -0,0 +1,17 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+const Loading = () => (
+  <div className="flex items-center justify-center gap-10">
+    {Array.from({ length: 4 }).map((_, idx) => (
+      <div
+        key={idx}
+        className="flex size-20 flex-col items-center justify-center gap-1 rounded-2xl border p-2 text-center shadow-md last:max-lg:hidden"
+      >
+        <Skeleton className="size-full" />
+        <Skeleton className="h-5 w-8" />
+      </div>
+    ))}
+  </div>
+)
+
+export default Loading

app/[locale]/10years/_components/CountDown/lazy.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/CountDown/loading.tsx

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