Save the model changes

In our application we have designer mode and view mode of diagram. In designer mode the users can edit the diagram, adding the new integrations, deleting and editing the text. So for each changes in the model we are calling the save API to save the changes in DB.

We have a button called view mode on top of designer mode so that user can switch between the view mode and designer mode. Now the issue is when the user made some changes to the diagram in designer mode and save API fires and in progress. The user clicks the view mode button at the top, the view mode loads without latest changes he made because API is in progress.

How can we tackle this scenario. We thought to disable the view mode button until the save API completes but it fails when we have multiple save API fires. We are using

this.dia.addModelChangedListener((evt) => {
      if (!evt.isTransactionFinished) return;
      var txn = evt.object;
      if (txn === null) return;
      this.save();
    });

Do you want to use the Diagram.isReadOnly property to prevent the user from making changes and the Diagram.isModified property for telling if the user did make any changes when not read-only?