fix:

Author: okawidhyartha

src/providers/SettingsProvider.jsx

@@ -50,13 +50,13 @@ export default function SettingsProvider({ children }) {
   const toast = useToast();
   const toastSyncRef = useRef();
   const [updating, setUpdating] = useState(false);
-  const [syncing, setSyncing] = useState(false);
   const [adding, setAdding] = useState(false);
   const {
     isOpen: isOpenMenu,
     onOpen: onOpenMenu,
     onClose: onCloseMenu,
   } = useDisclosure();
+  const syncRef = useRef(null);
 
   const { isOpen, onOpen, onClose } = useDisclosure();
 
@@ -83,7 +83,10 @@ export default function SettingsProvider({ children }) {
     if (!authUsername) return;
     const localSettings = await getSettingIDB(authUsername);
     if (!localSettings) return;
-    setSyncing(true);
+    if (syncRef.current) return;
+
+    syncRef.current = true;
+
     toastSyncRef.current = toast({
       title: "Syncing settings...",
       status: "loading",
@@ -163,7 +166,9 @@ export default function SettingsProvider({ children }) {
         throw new Error("Something went wrong when syncing your settings.");
       }
     }
-    setSyncing(false);
+
+    syncRef.current = false;
+
     toast.close(toastSyncRef.current);
   }, [authUsername, editSettingIDB, getSettingIDB, toast]);
 
@@ -310,8 +315,8 @@ export default function SettingsProvider({ children }) {
   );
 
   const handleSync = useCallback(() => {
-    if (!syncing && authUsername && navigator.onLine) syncSettings();
-  }, [syncing, authUsername, syncSettings]);
+    if (authUsername && navigator.onLine) syncSettings();
+  }, [authUsername, syncSettings]);
 
   useEffect(() => {
     fetchSettings();
@@ -352,7 +357,6 @@ export default function SettingsProvider({ children }) {
         updateAlarm,
         updateFocusMusic,
         updating,
-        syncing,
         adding,
         isOpenMenu,
         onOpenMenu,

src/providers/TasksProvider.jsx

@@ -33,19 +33,22 @@ export default function TasksProvider({ children }) {
     deleteRecord: deleteTaskIDB,
     getByID: getTaskIDB,
   } = useIndexedDB("tasks");
-  const [syncing, setSyncing] = useState(false);
 
   const [tasks, setTasks] = useState([]);
   const [_selectedTask, setSelectedTask] = useState();
   const { authUsername, afterSignUp } = useAuth();
   const [updating, setUpdating] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [adding, setAdding] = useState(false);
+  const syncRef = useRef(null);
 
   const syncTasks = useCallback(
     async (username) => {
+      if (syncRef.current) return;
       if (!username) return;
-      setSyncing(true);
+
+      syncRef.current = true;
+
       toastSyncRef.current = toast({
         title: "Syncing tasks...",
         status: "loading",
@@ -174,7 +177,8 @@ export default function TasksProvider({ children }) {
         });
       }
 
-      setSyncing(false);
+      syncRef.current = false;
+
       toast.close(toastSyncRef.current);
     },
     [addTaskIDB, deleteTaskIDB, editTaskIDB, getAllTasksIDB, toast]
@@ -200,15 +204,13 @@ export default function TasksProvider({ children }) {
           .sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt))
       );
 
-      if (!syncing && username !== GUEST_USERNAME && navigator.onLine)
-        syncTasks(username);
+      if (username !== GUEST_USERNAME && navigator.onLine) syncTasks(username);
     },
-    [getAllTasksIDB, syncTasks, syncing]
+    [getAllTasksIDB, syncTasks]
   );
 
   const syncAfterSignUp = useCallback(
     async (username) => {
-      setSyncing(true);
       toastSyncRef.current = toast({
         title: "Syncing tasks...",
         status: "loading",
@@ -259,7 +261,6 @@ export default function TasksProvider({ children }) {
           .sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt))
       );
 
-      setSyncing(false);
       toast.close(toastSyncRef.current);
     },
     [addTaskIDB, deleteTaskIDB, getAllTasksIDB, toast]
@@ -447,8 +448,8 @@ export default function TasksProvider({ children }) {
   }, [toast]);
 
   const handleSync = useCallback(() => {
-    if (!syncing && authUsername && navigator.onLine) syncTasks(authUsername);
-  }, [authUsername, syncing, syncTasks]);
+    if (authUsername && navigator.onLine) syncTasks(authUsername);
+  }, [authUsername, syncTasks]);
 
   useEffect(() => {
     window.addEventListener("online", handleSync);