Merge pull request #15634 from ethereum/staging

Staging

Author: corwintines

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

@@ -1,4 +1,6 @@
+import { Suspense } from "react"
 import { pick } from "lodash"
+import dynamic from "next/dynamic"
 import {
   getMessages,
   getTranslations,
@@ -13,6 +15,7 @@ import { Image } from "@/components/Image"
 import MainArticle from "@/components/MainArticle"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
+import { Skeleton } from "@/components/ui/skeleton"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
 import { cn } from "@/lib/utils/cn"
@@ -27,14 +30,17 @@ import CountDown from "./_components/CountDown"
 import { adoptionCards, adoptionStyles } from "./_components/data"
 import InnovationSwiper from "./_components/InnovationSwiper"
 import Stories from "./_components/Stories"
-import TenYearGlobe from "./_components/TenYearGlobe"
 import TenYearHero from "./_components/TenYearHero"
 import { parseStoryDates } from "./_components/utils"
 
 import { fetch10YearEvents } from "@/lib/api/fetch10YearEvents"
 import { fetch10YearStories } from "@/lib/api/fetch10YearStories"
 import TenYearLogo from "@/public/images/10-year-anniversary/10-year-logo.png"
 
+const TenYearGlobe = dynamic(() => import("./_components/TenYearGlobe"), {
+  ssr: false,
+})
+
 // In seconds
 const REVALIDATE_TIME = BASE_TIME_UNIT * 1
 
@@ -98,16 +104,22 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
                 local event or start your own celebration.
               </p>
             </div>
-            <div>
-              <TenYearGlobe
-                events={Object.values(fetched10YearEvents).flatMap((region) =>
-                  region.events.map((event) => ({
-                    ...event,
-                    lat: Number(event.lat),
-                    lng: Number(event.lng),
-                  }))
-                )}
-              />
+            <div className="h-[max(fit,260px)] sm:h-[400px] md:h-[500px] lg:h-[600px]">
+              <Suspense
+                fallback={
+                  <Skeleton className="mx-auto aspect-square h-full rounded-full bg-primary/20 blur-2xl" />
+                }
+              >
+                <TenYearGlobe
+                  events={Object.values(fetched10YearEvents).flatMap((region) =>
+                    region.events.map((event) => ({
+                      ...event,
+                      lat: Number(event.lat),
+                      lng: Number(event.lng),
+                    }))
+                  )}
+                />
+              </Suspense>
             </div>
           </div>
         </div>
@@ -364,7 +376,7 @@ export async function generateMetadata({
 
   return await getMetadata({
     locale,
-    slug: ["10-year-anniversary"],
+    slug: ["10years"],
     title: t("page-10-year-anniversary-meta-title"),
     description: t("page-10-year-anniversary-meta-description"),
   })

public/images/10-year-anniversary/10-year-og.png

@@ -1,4 +1,4 @@
 {
   "page-10-year-anniversary-meta-title": "10 Year Anniversary",
-  "page-10-year-anniversary-meta-description": "10 Year Anniversary"
+  "page-10-year-anniversary-meta-description": "Celebrating 10 years of censorship resistance, 100% uptime, decentralization, community building, developer growth, global collaboration, cypherpunk values, hackathons, censorship resistance, permissionless finance, credible neutrality, the infinite garden, client diversity and more."
 }

src/intl/en/page-10-year-anniversary.json

@@ -16,6 +16,7 @@ const imageForSlug = [
   { section: "guides", image: "/images/heroes/guides-hub-hero.jpg" },
   { section: "community", image: "/images/heroes/community-hero.png" },
   { section: "staking", image: "/images/upgrades/upgrade_rhino.png" },
+  { section: "10years", image: "/images/10-year-anniversary/10-year-og.png" },
 ] as const
 
 /**