Add progressbar for Git Push and Git Commit

app/components/Git/actions.js

@@ -6,6 +6,7 @@ import { createAction } from 'redux-actions'
 
 import Clipboard from 'clipboard'
 import i18n from 'utils/createI18n'
+import statusBarState from '../StatusBar/state'
 
 export const GIT_STATUS = 'GIT_STATUS'
 export const updateStatus = createAction(GIT_STATUS)
@@ -14,6 +15,7 @@ export const GIT_UPDATE_COMMIT_MESSAGE = 'GIT_UPDATE_COMMIT_MESSAGE'
 export const updateCommitMessage = createAction(GIT_UPDATE_COMMIT_MESSAGE)
 
 export function commit () {
+  statusBarState.displayBar = true
   return (dispatch, getState) => {
     const GitState = getState().GitState
     const stagedFiles = GitState.statusFiles.filter(file => file.isStaged)
@@ -23,6 +25,7 @@ export function commit () {
       files: stagedFilesPathList,
       message: GitState.commitMessage || initialCommitMessage,
     }).then((filetreeDelta) => {
+      statusBarState.displayBar = false
       if (filetreeDelta.code) {
         notify({ notifyType: NOTIFY_TYPE.ERROR, message: filetreeDelta.msg });
         return;
@@ -143,7 +146,9 @@ export function pull () {
 
 export function push () {
   return (dispatch) => {
+    statusBarState.displayBar = true
     api.gitPushAll().then((res) => {
+      statusBarState.displayBar = false
       if (res.nothingToPush) {
         notify({ message: 'Git push fail: nothing to push.' });
         return;
@@ -154,6 +159,7 @@ export function push () {
         notify({ message: `Git push fail: ${res.updates[0].status}` });
       }
     }).catch((res) => {
+      statusBarState.displayBar = false
       notify({ message: `Git push fail: ${res.response.data.msg}` })
     })
   }

app/components/StatusBar/StatusBar.jsx

@@ -6,6 +6,7 @@ import { observer } from 'mobx-react'
 import languageState from 'components/Tab/LanguageClientState'
 import configState from '../../config'
 import UploadWidgets from './UploadWidgets'
+import state from './state'
 
 const StatusBar = observer(({ messages=[] }) => {
   return (
@@ -19,6 +20,9 @@ const StatusBar = observer(({ messages=[] }) => {
       <div className='status-messages'>
         {messages.map(message => <div className='status-message'>{message}</div>)}
       </div>
+      {state.displayBar && <div className='status-progress'>
+        <span></span>
+      </div>}
       <div className='status-widget-container right'>
         <EditorWidgets />
         <GitBranchWidget ref={ com => window.refs.GitBranchWidget = com}

app/components/StatusBar/state.js

@@ -2,6 +2,7 @@ import { observable, autorun } from 'mobx'
 
 const state = observable({
   messages: observable.map(),
+  displayBar: false,
   uploadList: observable.map({
     // 'aaa.txt': { percentCompleted: 0, size: 100020303 },
     // 'bbb.txt': { percentCompleted: 50, size: 200020303 },

app/styles/base-theme/styles/bars.styl

@@ -7,6 +7,14 @@
 .status-bar {
   border-color: $base-border-color;
   background-color: $base-top-menu-bar-background;
+
+  .status-progress {
+    span {
+      background-image: linear-gradient(135deg, rgba(0, 0, 0, .15) 25%, transparent 25%,
+        transparent 50%, rgba(0, 0, 0, .15) 50%, rgba(0, 0, 0, .15) 75%,
+        transparent 75%, transparent);
+    }
+  }
 }
 
 .breadcrumbs {

app/styles/core-ui/StatusBar.styl

@@ -64,4 +64,29 @@ $bar-height = 30px;
       align-items: center;
     }
   }
+
+  .status-progress {
+    align-self: center;
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+
+    span {
+      width: 10vw;
+      display: inline-block;
+      height: 5px;
+      border-radius: 3px;
+      background-size: 30px 30px;
+      animation: animate-stripes 3s linear infinite;
+    }
+  }
+}
+
+@keyframes animate-stripes {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 60px 0;
+  }
 }

app/styles/dark/styles/bars.styl

@@ -13,6 +13,14 @@
     background-color: $base-background-color;
     color: $text-color;
   }
+
+  .status-progress {
+    span {
+      background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
+        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
+        transparent 75%, transparent);
+    }
+  }
 }
 
 .breadcrumbs {