Disconnect websocket provider on undo

src/hooks/useMultiplayerState.ts

@@ -24,6 +24,8 @@ import {
   yShapes,
   user,
   envs,
+  pauseSync,
+  resumeSync,
 } from "../stores/setup";
 import { STORAGE_SETTINGS_KEY } from "../utils/userSettings";
 import { UserPresence } from "../types/UserPresence";
@@ -405,18 +407,21 @@ export function useMultiplayerState({
   );
 
   const onUndo = useCallback(async (app: TldrawApp) => {
+    pauseSync();
     setIsReadOnlyToTrue(app);
+
     const assetsBeforeUndo = [...app.assets];
     undoManager.undo();
     const assetsAfterUndo = [...app.assets];
 
     try {
       await handleAssets(assetsBeforeUndo, assetsAfterUndo);
+      console.log("handle Assets done");
     } catch (error) {
       undoManager.redo();
       toast.error("An error occurred while undoing");
     }
-
+    resumeSync();
     setIsReadOnlyToFalse(app);
   }, []);
 

src/stores/setup.ts

@@ -40,6 +40,16 @@ const yBindings: Map<TDBinding> = doc.getMap("bindings");
 const yAssets: Map<TDAsset> = doc.getMap("assets");
 const undoManager = new UndoManager([yShapes, yBindings, yAssets]);
 
+// Function to pause the sync
+const pauseSync = () => {
+  provider.disconnect();
+};
+
+// Function to resume the sync
+const resumeSync = () => {
+  provider.connect();
+};
+
 export {
   envs,
   user,
@@ -51,4 +61,6 @@ export {
   yBindings,
   yAssets,
   undoManager,
+  pauseSync,
+  resumeSync,
 };