Add stale cache for public data

src/components/FigmaBanner.tsx

@@ -5,7 +5,7 @@ import {
   useState,
   type PointerEvent as ReactPointerEvent,
 } from "react";
-import { assetUrl, getJSON, itemsOrEmpty } from "../api";
+import { assetUrl, getJSON, itemsOrEmpty, readJSONCache } from "../api";
 import { langQuery, useI18n, type Lang } from "../i18n";
 
 const FIGMA_ASSET_BASE = "/assets/ark-library/figma";
@@ -75,14 +75,19 @@ export function FigmaBanner() {
 
   useEffect(() => {
     let cancelled = false;
+    const bannersUrl = `/api/banners?lang=${bannerLangParam(lang)}`;
     setActiveIndex(0);
-    getJSON<BannerApiResponse>(`/api/banners?lang=${bannerLangParam(lang)}`)
+
+    const cachedBanners = readJSONCache<BannerApiResponse>(bannersUrl);
+    if (cachedBanners) setSlides(toSlides(itemsOrEmpty(cachedBanners.items)));
+
+    getJSON<BannerApiResponse>(bannersUrl)
       .then((res) => {
         if (cancelled) return;
         setSlides(toSlides(itemsOrEmpty(res.items)));
       })
       .catch(() => {
-        if (!cancelled) setSlides([]);
+        if (!cancelled && !cachedBanners) setSlides([]);
       });
     return () => {
       cancelled = true;