From 4034b97cf320ad51578e3839abe11df1412c4d2a Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Wed, 29 Jul 2026 12:07:12 +0200
Subject: [PATCH] Web: Produktlisten zeigen "wird geladen" statt "keine
 Produkte" beim Laden

Bisher stand sofort "Keine Produkte gefunden." da, obwohl noch geladen wurde.
Jetzt ein Ladezustand: Kopf zeigt "Wird geladen...", Tabelle "Produkte werden
geladen...", und die Leer-Meldung kommt erst, wenn der Server wirklich nichts
liefert.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/pages/Products.jsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/Products.jsx b/web/src/pages/Products.jsx
index 8a91c00..d2dfbed 100644
--- a/web/src/pages/Products.jsx
+++ b/web/src/pages/Products.jsx
@@ -46,10 +46,15 @@ export default function Products({ fixedType = null }) {
   // "" = alle, sonst "food"/"object": trennt Lebensmittel und Gegenstände.
   const [typ, setTyp] = useState("");
   const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     // Alle Produkte einmal laden; das Filtern erledigt die Tabelle clientseitig.
-    api.listProducts("", "").then(setProducts).catch((err) => setError(err.message));
+    setLoading(true);
+    api.listProducts("", "")
+      .then(setProducts)
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false));
     api.listCategories().then(setCategories).catch(() => {});
   }, []);
 
@@ -126,7 +131,9 @@ export default function Products({ fixedType = null }) {
         <div>
           <h1>{titel}</h1>
           <div className="sub">
-            {sichtbar.length} {fixedType ? titel : `Produkte${activeTyp ? (activeTyp === "food" ? " · Lebensmittel" : " · Gegenstände") : " im Katalog"}`}
+            {loading
+              ? "Wird geladen…"
+              : `${sichtbar.length} ${fixedType ? titel : `Produkte${activeTyp ? (activeTyp === "food" ? " · Lebensmittel" : " · Gegenstände") : " im Katalog"}`}`}
           </div>
         </div>
         {isAdmin && (
@@ -146,7 +153,8 @@ export default function Products({ fixedType = null }) {
 
       <div className="card">
         <DataTable id={fixedType ? `products-${fixedType}` : "products"} columns={columns} rows={sichtbar}
-          getRowKey={(p) => p.id} empty="Keine Produkte gefunden." />
+          getRowKey={(p) => p.id}
+          empty={loading ? "Produkte werden geladen…" : "Keine Produkte gefunden."} />
       </div>
     </div>
   );