disable edit lock while loading

package.json

@@ -157,5 +157,8 @@
   },
   "workspaces": [
     "packages/*"
-  ]
+  ],
+  "volta": {
+    "node": "16.20.2"
+  }
 }

packages/ove/cypress/e2e/editLocking.spec.js

@@ -2,11 +2,15 @@ describe("editLocking", () => {
   beforeEach(() => {
     cy.visit("");
   });
+
   it("unlocking/locking should trigger the onChangeEditLock", () => {
     cy.tgToggle("onChangeEditLock");
     cy.get('span[icon="unlock"]').click();
+    cy.get('span[icon="unlock"]').trigger("mouseover");
+    cy.contains("Loading...");
     cy.contains("onChangeEditLock callback triggered");
   });
+
   it("disabled edit lock tooltip should show forbiden message", () => {
     cy.tgToggle("disableSetReadOnly");
     cy.get('span[icon="unlock"]').trigger("mouseover");

packages/ove/demo/src/EditorDemo/index.js

@@ -2207,6 +2207,7 @@ clickOverrides: {
             {...(this.state.onChangeEditLock && {
               onChangeEditLock: () => {
                 window.toastr.success("onChangeEditLock callback triggered");
+                return new Promise((resolve) => setTimeout(resolve, 1000));
               }
             })}
             {...(this.state.onSaveAs && {

packages/ove/package.json

@@ -1,5 +1,8 @@
 {
   "name": "@teselagen/ove",
   "version": "0.3.7",
-  "main": "./src/index.js"
+  "main": "./src/index.js",
+  "volta": {
+    "node": "16.20.2"
+  }
 }

packages/ove/src/ToolBar/ToolbarItem.js

@@ -187,8 +187,6 @@ class ToolbarItem extends React.Component {
   }
 }
 
-
-
 export default connectToEditor(({ toolBar = {} }, { toolName }) => ({
   isOpen: toolBar.openItem === toolName
 }))(ToolbarItem);

packages/ove/src/ToolBar/editTool.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Icon } from "@blueprintjs/core";
 import ToolbarItem from "./ToolbarItem";
 import { connectToEditor } from "../withEditorProps";
@@ -15,19 +15,26 @@ export default connectToEditor((editorState) => {
     disableSetReadOnly,
     onChangeEditLock
   }) => {
+    const [isLoading, setIsLoading] = useState(false);
     const readOnlyTooltip = ({ readOnly, disableSetReadOnly }) => {
-      if (disableSetReadOnly) {
+      if (isLoading) {
+        return "Loading...";
+      } else if (disableSetReadOnly) {
         return "You do not have permission to edit locks on this sequence";
       }
       return readOnly ? "Click to enable editing" : "Click to disable editing";
     };
     return (
       <ToolbarItem
         {...{
-          disabled: disableSetReadOnly,
+          disabled: isLoading || disableSetReadOnly,
           Icon: <Icon icon={readOnly ? "lock" : "unlock"} />,
-          onIconClick: () => {
-            if (onChangeEditLock) onChangeEditLock(!readOnly);
+          onIconClick: async () => {
+            if (onChangeEditLock) {
+              setIsLoading(true);
+              await onChangeEditLock(!readOnly);
+              setIsLoading(false);
+            }
             toggleReadOnlyMode();
           },
           tooltip: readOnlyTooltip({ readOnly, disableSetReadOnly }),