From 8b0ee18cd87a980dfee3c4c0d9158b81df76bc1b Mon Sep 17 00:00:00 2001 From: TerryM Date: Tue, 2 Jun 2026 11:05:59 +0800 Subject: [PATCH] fix: seed home categories from cache to stop icon flicker Initialize the categories state from the cached response on first render so the category icons stay visible when navigating back to the home page, instead of flashing empty for a frame. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/pages/Home/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index a8412cc..df9d9de 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -45,7 +45,15 @@ export function Home() { const { t, lang } = useI18n(); const lp = useLocalizedPath(); const { hash } = useLocation(); - const [cats, setCats] = useState([]); + // Seed from cache on the first render so the categories (and their icons) + // are present immediately when navigating back to the home page, instead of + // flashing empty for a frame before the effect re-applies the cached data. + const [cats, setCats] = useState(() => { + const cached = readJSONCache( + `/api/categories?lang=${encodeURIComponent(langQuery(lang))}`, + ); + return cached ? itemsOrEmpty(cached) : []; + }); const [rec, setRec] = useState([]); const [latestPosts, setLatestPosts] = useState([]); const [popular, setPopular] = useState([]);