fix syncing badge

src/App.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useContext } from "react";
+import { useState, useEffect, useCallback, useContext, useRef } from "react";
 import { AuthContext } from "./AuthContext";
 import Login from "./Login";
 import Register from "./Register";
@@ -763,21 +763,27 @@ export default function CoffeeLogbook() {
 
   const [isOnline, setIsOnline] = useState(navigator.onLine);
   const [syncing, setSyncing] = useState(false);
+  const [showSyncedStatus, setShowSyncedStatus] = useState(false);
 
   // Load local data on mount
   useEffect(() => {
     loadData().then(setData);
   }, []);
 
+  const dataRef = useRef(data);
+  dataRef.current = data;
+
   // Sync logic
-  const syncData = useCallback(async (currentData = data) => {
+  const syncData = useCallback(async (currentData = dataRef.current) => {
     if (!token || !currentData) return;
     if (!navigator.onLine) {
       setIsOnline(false);
+      setShowSyncedStatus(true);
       return;
     }
     setIsOnline(true);
     setSyncing(true);
+    setShowSyncedStatus(true);
 
     try {
       const { beans = [], brewLogs = [], lastSyncedAt = null } = currentData;
@@ -846,8 +852,15 @@ export default function CoffeeLogbook() {
       console.error('Failed to sync data:', err);
     } finally {
       setSyncing(false);
+      if (navigator.onLine) {
+        setTimeout(() => {
+          setShowSyncedStatus(false);
+        }, 2500);
+      } else {
+        setShowSyncedStatus(true);
+      }
     }
-  }, [token, data]);
+  }, [token]);
 
   // Periodic and connectivity event-driven sync triggers
   useEffect(() => {
@@ -857,6 +870,7 @@ export default function CoffeeLogbook() {
     };
     const handleOffline = () => {
       setIsOnline(false);
+      setShowSyncedStatus(true);
     };
 
     window.addEventListener('online', handleOnline);
@@ -996,24 +1010,26 @@ export default function CoffeeLogbook() {
           <h1>Brew Journal</h1>
         </div>
         <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
-          <div 
-            style={{ 
-              display: "flex", 
-              alignItems: "center", 
-              gap: "4px", 
-              fontSize: "11px", 
-              fontWeight: "500",
-              color: isOnline ? "#4A7C59" : "#B44040",
-              background: isOnline ? "rgba(74,124,89,0.08)" : "rgba(180,64,64,0.08)",
-              padding: "4px 8px",
-              borderRadius: "12px",
-              transition: "all 0.3s"
-            }}
-            title={isOnline ? "All local logs are synchronized with PostgreSQL database" : "No internet connection. Saved locally."}
-          >
-            <span style={{ fontSize: "10px", animation: syncing ? "pulse 1.5s infinite" : "none" }}>●</span>
-            <span>{isOnline ? (syncing ? "Syncing..." : "Synced") : "Offline"}</span>
-          </div>
+          {showSyncedStatus && (
+            <div 
+              style={{ 
+                display: "flex", 
+                alignItems: "center", 
+                gap: "4px", 
+                fontSize: "11px", 
+                fontWeight: "500",
+                color: isOnline ? "#4A7C59" : "#B44040",
+                background: isOnline ? "rgba(74,124,89,0.08)" : "rgba(180,64,64,0.08)",
+                padding: "4px 8px",
+                borderRadius: "12px",
+                transition: "all 0.3s"
+              }}
+              title={isOnline ? "All local logs are synchronized with PostgreSQL database" : "No internet connection. Saved locally."}
+            >
+              <span style={{ fontSize: "10px", animation: syncing ? "pulse 1.5s infinite" : "none" }}>●</span>
+              <span>{isOnline ? (syncing ? "Syncing..." : "Synced") : "Offline"}</span>
+            </div>
+          )}
           <span style={{ fontSize: "12px", color: "var(--text2)" }}>{user?.username}</span>
           <button 
             onClick={() => logout()}