Adding visual indication a commit is in progress

lib/views/commit-view.js

@@ -21,6 +21,35 @@ export default class CommitView {
   constructor(props) {
     this.props = props;
 
+    // We don't want the user to see the UI flicker in the case
+    // the commit takes a very small time to complete. Instead we
+    // will only show the working message if we are working for longer
+    // than 1 second as per https://www.nngroup.com/articles/response-times-3-important-limits/
+    //
+    // The closure is created to restrict variable access
+    this.shouldShowWorking = (() => {
+      let showWorking = false;
+      let timeoutHandle = null;
+
+      return () => {
+        if (this.props.isCommitting) {
+          if (!showWorking && timeoutHandle === null) {
+            timeoutHandle = setTimeout(() => {
+              showWorking = true;
+              etch.update(this);
+              timeoutHandle = null;
+            }, 1000);
+          }
+        } else {
+          clearTimeout(timeoutHandle);
+          timeoutHandle = null;
+          showWorking = false;
+        }
+
+        return showWorking;
+      };
+    })();
+
     etch.initialize(this);
 
     this.editor = this.refs.editor;
@@ -157,6 +186,8 @@ export default class CommitView {
   commitButtonText() {
     if (this.props.isAmending) {
       return `Amend commit (${shortenSha(this.props.lastCommit.getSha())})`;
+    } else if (this.shouldShowWorking()) {
+      return 'Working...';
     } else {
       if (this.props.branchName) {
         return `Commit to ${this.props.branchName}`;