Improve loading UX with a new loading button component used in buttons that trigger network ops

src/assets/styles/components/_web-ide.scss

@@ -164,14 +164,6 @@
       background: rgb(26, 26, 26);
     }
 
-    /*
-    .root {
-      display: grid;
-      grid-template-columns: 150px minmax(0px, auto);
-      height: 100%;
-    }
-    */
-    // background: transparent !important;
   }
 
   .file-menu,
@@ -296,6 +288,22 @@
 }
 
 .web-ide {
+  .button-with-loader {
+    min-width: 105px;
+
+    &.loading {
+      color: transparent;
+    }
+
+    .button-with-loader-icon {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
+
+  }
   .cancel-button {
     margin-left: 10px;
   }

src/components/shared/ButtonWithLoader.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import cn from 'classnames';
+
+export default function ButtonWithLoader({ className, onClick, disabled, children }) {
+
+  const [ loading, setLoading ] = useState(false);
+
+  return (
+    <button
+      disabled={disabled}
+      type="button"
+      onClick={ 
+        async () => {
+
+          setLoading(true);
+
+          try {
+
+            await onClick();
+            setLoading(false);
+
+          } catch(e) {
+            setLoading(false);
+          }
+
+        }
+      }
+      className={
+        cn(`${className} button-with-loader`, { loading })
+      }>
+      {
+        loading ?
+          <i className="button-with-loader-icon fas fa-spinner fa-spin" /> 
+          : children
+      }
+    </button>
+  );
+}
+
+

src/components/shared/webide/index.js

@@ -88,7 +88,7 @@ function WebIDE({
   }
 
   async function addProjectFolder(newFolderName) {
-    onAddProjectFolder(newFolderName, selectedFolder)
+    await onAddProjectFolder(newFolderName, selectedFolder)
     // go back to prev window
     updateActiveEditorWindow(previousActiveEditorWindow, activeEditorWindow);
   }
@@ -384,8 +384,8 @@ function WebIDE({
             active={ activeEditorWindow === EDITOR_WINDOWS.DELETE_FILE_WINDOW }
             selectedFile={ selectedFile }
             onConfirm={
-              () => {
-                onDeleteFile(selectedFile);
+              async () => {
+                await onDeleteFile(selectedFile);
                 setSelectedFile(null);
                 setSelectedFolder(null);
                 updateActiveEditorWindow(EDITOR_WINDOWS.DEFAULT_WINDOW, activeEditorWindow);

src/components/shared/webide/windows/DeleteFileWindow.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Card, CardTitle, CardBody } from 'reactstrap';
+import ButtonWithLoader from '../../ButtonWithLoader'; 
 
 export default function DeleteFileWindow({ active, selectedFile, onConfirm, onCancel }) {
 
@@ -10,14 +11,24 @@ export default function DeleteFileWindow({ active, selectedFile, onConfirm, onCa
   const {project} = selectedFile;
   const filepath = selectedFile.path.split(`/${project}/`)[1];
 
+
   return (
     <Card className="delete-file-window">
       <CardBody className="delete-file-window-container">
         <div className="delete-file-window-controls">
           <CardTitle className="delete-file-window-title">Delete Confirmation</CardTitle>
           <p>Are you sure you want to delete file <span className="file-to-delete">{filepath}</span> from project <span className="file-to-delete-parent-project">{ project }</span> ?</p> 
-          <button type="button" className="btn btn-danger delete-button" onClick={ onConfirm }>Delete</button>
-          <button type="button" className="btn btn-secondary cancel-button" onClick={ onCancel }>Cancel</button>
+          <ButtonWithLoader
+            className="btn btn-danger delete-button"
+            onClick={ onConfirm }>
+            Delete
+          </ButtonWithLoader>
+          <button
+            type="button"
+            className="btn btn-secondary cancel-button"
+            onClick={ onCancel }>
+            Cancel
+          </button>
         </div>
       </CardBody>
     </Card>

src/components/shared/webide/windows/DeleteFolderWindow.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Card, CardTitle, CardBody } from 'reactstrap';
+import ButtonWithLoader from '../../ButtonWithLoader'; 
 
 export default function DeleteFolderWindow({ active, selectedFolder, onConfirm, onCancel }) {
 
@@ -24,7 +25,11 @@ export default function DeleteFolderWindow({ active, selectedFolder, onConfirm,
                   <span className="folder-to-delete"> {projectSubdir} </span> from project <span className="folder-to-delete-parent-project">{ project }</span> ?
                 </p> 
             }
-            <button type="button" className="btn btn-danger delete-button" onClick={ onConfirm }>Delete</button>
+            <ButtonWithLoader
+              className="btn btn-danger delete-button"
+              onClick={ onConfirm }>
+              Delete
+            </ButtonWithLoader>
             <button type="button" className="btn btn-secondary cancel-button" onClick={ onCancel }>Cancel</button>
         </div>
       </CardBody>

src/components/shared/webide/windows/DeletePackageWindow.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Card, CardTitle, CardBody } from 'reactstrap';
+import ButtonWithLoader from '../../ButtonWithLoader'; 
 
 export default function DeletePackageWindow({ active, selectedPackage, onConfirm, onCancel }) {
 
@@ -15,7 +16,11 @@ export default function DeletePackageWindow({ active, selectedPackage, onConfirm
         <div className="delete-package-window-controls">
           <CardTitle className="delete-package-window-title">Delete Confirmation</CardTitle>
           <p>Are you sure you want to delete package <span className="package-to-delete">{ packageName }</span> ?</p>
-          <button type="button" className="btn btn-danger delete-button" onClick={ onConfirm }>Delete</button>
+          <ButtonWithLoader
+            className="btn btn-danger delete-button"
+            onClick={ onConfirm }>
+            Delete
+          </ButtonWithLoader>
           <button type="button" className="btn btn-secondary cancel-button" onClick={ onCancel }>Cancel</button>
         </div>
       </CardBody>

src/components/shared/webide/windows/NameInput.js

@@ -3,11 +3,10 @@
 
 import React, { useState } from 'react';
 import cn from 'classnames';
+import ButtonWithLoader from '../../ButtonWithLoader';
 
 export default function NameInput({ onCancel, onConfirm, onEnter, label='', placeholder='', value, validate=() => true }) {
 
-
-
   const [ name, setName ] = useState(value || '');
   const [ isValidName, setIsValidName ] = useState(false); 
 
@@ -36,7 +35,7 @@ export default function NameInput({ onCancel, onConfirm, onEnter, label='', plac
     <div
       tabIndex={0}
       className={ cn("name-input") }>
-      { label && <label><span>{label}:</span></label> }
+        { label && <label><span>{label}:</span></label> }
         <div className="name-input-container">
           <input
             className={ cn({ invalid: name.length > 0 && !isValidName }) }
@@ -61,15 +60,17 @@ export default function NameInput({ onCancel, onConfirm, onEnter, label='', plac
           <span className="invalid-text" />
           <div className="name-input-buttons-container">
 
-            <button
-              type="button"
+            <ButtonWithLoader
               disabled={ !isValidName }
               className="btn btn-success name-input-confirm"
-              onClick={ () => {
-
-                onConfirm(name); 
-              }}>ok</button>
-            <button type="button" className="btn btn-secondary name-input-cancel cancel-button" onClick={ onCancel }>cancel</button>
+              onClick={ () => onConfirm(name) } 
+              >OK</ButtonWithLoader>
+            <button
+              type="button"
+              className="btn btn-secondary name-input-cancel cancel-button"
+              onClick={ onCancel }>
+              Cancel
+            </button>
         </div>
     </div>
   );