From ee7bd9fcbf34ae4f1c35e55e137162fa5dc2349c Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Sun, 26 Jul 2026 23:43:52 +0200
Subject: [PATCH] round71: Abfrage-Cache in localStorage gespiegelt - kein
 leerer Ladezustand mehr bei echtem Seiten-Reload

---
 apps/frontend/package.json |  4 +++-
 apps/frontend/src/main.tsx | 27 ++++++++++++++++++++++++---
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 425e3f5..cfe117f 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -16,7 +16,9 @@
     "@fortawesome/react-fontawesome": "^3.5.0",
     "@launchpad/shared": "workspace:*",
     "@launchpad/ui": "workspace:*",
-    "@tanstack/react-query": "^5.51.23",
+    "@tanstack/react-query": "5.101.2",
+    "@tanstack/query-sync-storage-persister": "5.101.2",
+    "@tanstack/react-query-persist-client": "5.101.2",
     "@tanstack/react-router": "^1.58.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx
index 196ad47..a3b38b0 100644
--- a/apps/frontend/src/main.tsx
+++ b/apps/frontend/src/main.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient } from "@tanstack/react-query";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
 import { RouterProvider } from "@tanstack/react-router";
 import { router } from "./router.js";
 import "./index.css";
@@ -31,10 +33,29 @@ const queryClient = new QueryClient({
   },
 });
 
+// NEU: Ohne das hier verlor ein ECHTER Seiten-Reload (z. B. "Runterziehen
+// zum Aktualisieren" auf dem Handy) den kompletten Abfrage-Cache - alle
+// Daten (Dienste, Lesezeichen, Kategorien, "Zuletzt besucht", Einstellungen)
+// mussten neu vom Server geholt werden, bis dahin zeigte die Startseite
+// zwangsläufig einen leeren Lade-Platzhalter (siehe Bugreport-Screenshot).
+// Der Persister spiegelt den Cache zusätzlich in localStorage - beim
+// nächsten Laden wird SOFORT der zuletzt bekannte Stand angezeigt (keine
+// Lücke mehr), während im Hintergrund still neu geladen wird und die
+// Ansicht bei Abweichungen automatisch aktualisiert. maxAge begrenzt, wie
+// alt ein aus dem Speicher geladener Stand höchstens sein darf, bevor er
+// verworfen wird (dann normaler Ladevorgang wie bisher).
+const persister = createSyncStoragePersister({
+  storage: window.localStorage,
+  key: "launchpad-query-cache",
+});
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{ persister, maxAge: 24 * 60 * 60 * 1000 }}
+    >
       <RouterProvider router={router} />
-    </QueryClientProvider>
+    </PersistQueryClientProvider>
   </React.StrictMode>
 );