Add fetch/pull/push progress indicator

lib/views/push-pull-menu-view.js

@@ -12,6 +12,7 @@ export default class PushPullMenuView {
     this.push = this.push.bind(this)
     this.pull = this.pull.bind(this)
     this.fetch = this.fetch.bind(this)
+    this.inProgress = false
     etch.initialize(this)
   }
 
@@ -31,7 +32,7 @@ export default class PushPullMenuView {
 
   render () {
     return (
-      <div className='git-PushPullMenuView'>
+      <div className={'git-PushPullMenuView' + (this.inProgress ? ' in-progress' : '')}>
         <div className='git-PushPullMenuView-selector'>
           <span className='git-PushPullMenuView-item icon icon-mark-github'/>
           <button className='git-PushPullMenuView-item btn' ref='fetchButton' onclick={this.fetch} disabled={!this.props.remoteName}>Fetch</button>
@@ -55,26 +56,36 @@ export default class PushPullMenuView {
   }
 
   async fetch () {
+    this.inProgress = true
+    etch.update(this)
     try {
       await this.props.fetch()
     } catch (error) {
       if (!(error instanceof GitError)) throw error
       this.errorMessage = error.stdErr
+    } finally {
+      this.inProgress = false
       return etch.update(this)
     }
   }
 
   async pull () {
+    this.inProgress = true
+    etch.update(this)
     try {
       await this.props.pull()
     } catch (error) {
       if (!(error instanceof GitError)) throw error
       this.errorMessage = error.stdErr
+    } finally {
+      this.inProgress = false
       return etch.update(this)
     }
   }
 
   async push (event) {
+    this.inProgress = true
+    etch.update(this)
     try {
       await this.props.push({force: event.metaKey, setUpstream: !this.props.remoteName})
     } catch (error) {
@@ -84,6 +95,8 @@ export default class PushPullMenuView {
       } else {
         this.errorMessage = error.stdErr
       }
+    } finally {
+      this.inProgress = false
       return etch.update(this)
     }
   }

styles/push-pull-menu-view.less

@@ -51,4 +51,39 @@
       display: none;
     }
   }
+
+
+  // Progress indicator
+  &.in-progress {
+    .icon-mark-github {
+      position: relative;
+      color: @text-color;
+      &:before {
+        color: inherit;
+      }
+      &:after {
+        content: "";
+        position: absolute;
+        top: -4px;
+        left: -4px;
+        width: 24px;
+        height: 24px;
+        border-top: 2px dotted;
+        border-right: 2px dotted;
+        border-bottom: 2px dotted transparent;
+        border-radius: 16px;
+
+        // To limit CPU usage, the animation plays for some time at normal speed,
+        // then slows down frame-rate for a while and stops at some point
+        -webkit-animation: git-PushPullMenuView-animation 2s linear 12,
+                           git-PushPullMenuView-animation 4s 24s steps(12) 100;
+      }
+    }
+  }
+}
+
+
+// Animations
+@-webkit-keyframes git-PushPullMenuView-animation {
+  100% { transform: rotate(360deg); }
 }

test/controllers/status-bar-tile-controller.test.js

@@ -275,7 +275,8 @@ describe('StatusBarTileController', () => {
         assert.equal(pullButton.textContent, 'Pull (2)')
 
         pushButton.dispatchEvent(new MouseEvent('click'))
-        await etch.getScheduler().getNextUpdatePromise()
+        await etch.getScheduler().getNextUpdatePromise() // update for loading
+        await etch.getScheduler().getNextUpdatePromise() // update for error message
         assert.match(message.innerHTML, /Push rejected/)
 
         pushButton.dispatchEvent(new MouseEvent('click', {metaKey: true}))