Improve responsive layouts and streamline page loading

app/page.tsx

@@ -18,13 +18,12 @@ import { LeaderboardPreview } from "@/components/Leaderboard";
 import desktopRelease from "@/shared/desktop-release.json";
 import { FirstVisitIntro } from "@/components/FirstVisitIntro";
 import { SiteTrailer } from "@/components/SiteTrailer";
+import { Suspense } from "react";
 export const dynamic = "force-dynamic";
 export default async function Home() {
   const { t, formatNumber } = await getI18n();
-  const [maps, rankings] = await Promise.all([
-    catalog(),
-    leaderboard({ limit: 5 }),
-  ]);
+  const rankings = leaderboard({ limit: 5 });
+  const maps = await catalog();
   const servers = new Set(maps.map((map) => map.server_id)).size;
   const locations = maps.reduce((total, map) => total + map.panorama_count, 0);
   return (
@@ -78,6 +77,7 @@ export default async function Home() {
                 width={1024}
                 height={1024}
                 loading="eager"
+                fetchPriority="high"
                 unoptimized
               />
               <span className="square-pin pin-green" />
@@ -142,7 +142,13 @@ export default async function Home() {
           {maps.length ? (
             <div className="cards-grid">
               {maps.slice(0, 4).map((map, index) => (
-                <MapCard map={map} index={index} key={map.id} minecraftPaper />
+                <MapCard
+                  map={map}
+                  index={index}
+                  key={map.id}
+                  minecraftPaper
+                  loading="lazy"
+                />
               ))}
             </div>
           ) : (
@@ -175,7 +181,19 @@ export default async function Home() {
           )}
         </section>
         <SiteTrailer />
-        <LeaderboardPreview data={rankings} />
+        <Suspense
+          fallback={
+            <section
+              className="section leaderboard-preview-placeholder"
+              aria-busy="true"
+            >
+              <h2>{t("THE EXPLORERS’ BOARD")}</h2>
+              <div className="loading-surface" />
+            </section>
+          }
+        >
+          <HomeLeaderboard data={rankings} />
+        </Suspense>
         <section className="section home-panels">
           <article className="home-panel">
             <span className="eyebrow">{t("HOW TO PLAY")}</span>
@@ -217,7 +235,7 @@ export default async function Home() {
           </article>
           <article className="home-panel">
             <span className="eyebrow">{t("CHOOSE YOUR CHALLENGE")}</span>
-            <h2>{t("One world. Three ways.")}</h2>
+            <h2>{t("Find your challenge.")}</h2>
             <div className="mode-list">
               {[
                 {
@@ -238,6 +256,12 @@ export default async function Home() {
                   detail: t("Think fast. No zoom allowed."),
                   color: "red",
                 },
+                {
+                  name: t("Void"),
+                  time: t("10 seconds"),
+                  detail: t("The ultimate test. Fixed view, strict scoring."),
+                  color: "void",
+                },
               ].map((mode) => (
                 <Link href="/servers" className="mode-row" key={mode.name}>
                   <i className={`stat-cube ${mode.color}-cube`} />
@@ -278,3 +302,10 @@ export default async function Home() {
     </>
   );
 }
+async function HomeLeaderboard({
+  data,
+}: {
+  data: ReturnType<typeof leaderboard>;
+}) {
+  return <LeaderboardPreview data={await data} />;
+}