From 0a1052f2174fdc8ab72bc0f8e2854ad2ee78d605 Mon Sep 17 00:00:00 2001 From: Dicken Date: Sun, 26 Jul 2026 22:51:05 +0200 Subject: [PATCH] round69: Kurzes Aufblitzen des Classic-Designs beim Reload behoben (Design-Wahl jetzt zusaetzlich lokal zwischengespeichert) --- apps/frontend/src/routes/HomePage.tsx | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/apps/frontend/src/routes/HomePage.tsx b/apps/frontend/src/routes/HomePage.tsx index 03912d0..f18bf4b 100644 --- a/apps/frontend/src/routes/HomePage.tsx +++ b/apps/frontend/src/routes/HomePage.tsx @@ -311,7 +311,29 @@ export function HomePage() { const showResults = isSearching && resultsVisible; const isMobile = useIsMobile(); - const useAndroidHome = isMobile && settings?.mobileHomeStyle === "android"; + // WICHTIG: Bei einem ECHTEN Seiten-Reload (z. B. "mit Runterziehen + // aktualisieren" auf dem Handy) ist settings.mobileHomeStyle beim + // allerersten Render noch nicht geladen (React-Query-Cache ist nach einem + // vollständigen Reload leer, die Server-Antwort kommt erst asynchron + // nach) - bis dahin wäre "classic" der Standard-Fallback gewesen und kurz + // sichtbar aufgeblitzt, bevor auf "android" umgeschaltet wird (siehe + // Bugreport). Die zuletzt bekannte Wahl wird daher zusätzlich in + // localStorage gespiegelt (überlebt einen Reload, im Gegensatz zum + // React-Query-Cache) und beim allerersten Render schon genutzt, bevor die + // eigentliche Serverantwort da ist - dieselbe Technik wie beim + // Dark-Mode-Flash (siehe index.html). + const [cachedMobileHomeStyle, setCachedMobileHomeStyle] = useState(() => + typeof window !== "undefined" ? window.localStorage.getItem("launchpad:mobileHomeStyle") : null + ); + useEffect(() => { + if (settings?.mobileHomeStyle && settings.mobileHomeStyle !== cachedMobileHomeStyle) { + window.localStorage.setItem("launchpad:mobileHomeStyle", settings.mobileHomeStyle); + setCachedMobileHomeStyle(settings.mobileHomeStyle); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [settings?.mobileHomeStyle]); + const effectiveMobileHomeStyle = settings?.mobileHomeStyle ?? cachedMobileHomeStyle ?? "classic"; + const useAndroidHome = isMobile && effectiveMobileHomeStyle === "android"; const addReadLaterMutation = useMutation({ mutationFn: (url: string) => saveReadLaterRequest(url),