"This ensures proper saving of collaboration data when user leaves the room Fixes #9104"

excalidraw-app/App.tsx

@@ -476,7 +476,7 @@ const ExcalidrawWrapper = () => {
           collabAPI?.isCollaborating() &&
           !isCollaborationLink(window.location.href)
         ) {
-          collabAPI.stopCollaboration(false);
+          await collabAPI.stopCollaboration(false);
         }
         excalidrawAPI.updateScene({ appState: { isLoading: true } });
 
@@ -968,9 +968,9 @@ const ExcalidrawWrapper = () => {
                 "exit",
                 "collaboration",
               ],
-              perform: () => {
+              perform: async () => {
                 if (collabAPI) {
-                  collabAPI.stopCollaboration();
+                  await collabAPI.stopCollaboration();
                   if (!collabAPI.isCollaborating()) {
                     setShareDialogState({ isOpen: false });
                   }

excalidraw-app/collab/Collab.tsx

@@ -340,13 +340,14 @@ class Collab extends PureComponent<CollabProps, CollabState> {
     }
   };
 
-  stopCollaboration = (keepRemoteState = true) => {
+  stopCollaboration = async (keepRemoteState = true) => {
     this.queueBroadcastAllElements.cancel();
     this.queueSaveToFirebase.cancel();
     this.loadImageFiles.cancel();
     this.resetErrorIndicator(true);
 
-    this.saveCollabRoomToFirebase(
+    // Ensure we save the latest state before stopping collaboration
+    await this.saveCollabRoomToFirebase(
       getSyncableElements(
         this.excalidrawAPI.getSceneElementsIncludingDeleted(),
       ),
@@ -367,6 +368,9 @@ class Collab extends PureComponent<CollabProps, CollabState> {
       // that could have been saved in other tabs while we were collaborating
       resetBrowserStateVersions();
 
+      // Ensure all pending changes are saved before pushing new state
+      this.queueSaveToFirebase.flush();
+      
       window.history.pushState({}, APP_NAME, window.location.origin);
       this.destroySocketClient();
 
@@ -938,9 +942,9 @@ class Collab extends PureComponent<CollabProps, CollabState> {
   }, SYNC_FULL_SCENE_INTERVAL_MS);
 
   queueSaveToFirebase = throttle(
-    () => {
+    async () => {
       if (this.portal.socketInitialized) {
-        this.saveCollabRoomToFirebase(
+        await this.saveCollabRoomToFirebase(
           getSyncableElements(
             this.excalidrawAPI.getSceneElementsIncludingDeleted(),
           ),

excalidraw-app/share/ShareDialog.tsx

@@ -164,10 +164,11 @@ const ActiveRoomDialog = ({
           icon={playerStopFilledIcon}
           onClick={() => {
             trackEvent("share", "room closed");
-            collabAPI.stopCollaboration();
-            if (!collabAPI.isCollaborating()) {
-              handleClose();
-            }
+            collabAPI.stopCollaboration().then(() => {
+              if (!collabAPI.isCollaborating()) {
+                handleClose();
+              }
+            });
           }}
         />
       </div>