add loading status indicator

app/src/lib/app-state.ts

@@ -329,6 +329,9 @@ export interface IRepositoryState {
    * null if no such operation is in flight.
    */
   readonly pushPullFetchProgress: Progress | null
+
+  /** Is loading the status */
+  readonly isLoadingStatus: boolean
 }
 
 export type Progress =

app/src/lib/dispatcher/app-store.ts

@@ -405,6 +405,7 @@ export class AppStore {
       lastFetched: null,
       checkoutProgress: null,
       pushPullFetchProgress: null,
+      isLoadingStatus: false,
     }
   }
 
@@ -1005,6 +1006,14 @@ export class AppStore {
       skipParsingModifiedSketchFiles?: boolean
     }
   ): Promise<void> {
+    this.updateRepositoryState(repository, state => {
+      return {
+        isLoadingStatus: true,
+      }
+    })
+
+    this.emitUpdate()
+
     const oldFiles = this.getRepositoryState(repository).kactus.files
 
     const kactusStatus = await getKactusStatus(this.sketchPath, repository)
@@ -1045,6 +1054,12 @@ export class AppStore {
     const status = await gitStore.loadStatus()
 
     if (!status) {
+      this.updateRepositoryState(repository, state => {
+        return {
+          isLoadingStatus: false,
+        }
+      })
+      this.emitUpdate()
       return
     }
 
@@ -1092,6 +1107,12 @@ export class AppStore {
       const diff = sameSelectedFileExists ? state.diff : null
       return { workingDirectory, selectedFileID, diff }
     })
+
+    this.updateRepositoryState(repository, state => {
+      return {
+        isLoadingStatus: false,
+      }
+    })
     this.emitUpdate()
 
     this.updateChangesDiffForCurrentSelection(repository)

app/src/ui/changes/changes-list.tsx

@@ -64,6 +64,8 @@ interface IChangesListProps {
 
   /** Called when the given pattern should be ignored. */
   readonly onIgnore: (pattern: string) => void
+
+  readonly isLoadingStatus: boolean
 }
 
 export class ChangesList extends React.Component<IChangesListProps, {}> {
@@ -168,6 +170,7 @@ export class ChangesList extends React.Component<IChangesListProps, {}> {
           onSelectionChanged={this.props.onFileSelectionChanged}
           invalidationProps={this.props.workingDirectory}
           onRowClick={this.props.onRowClick}
+          loading={this.props.isLoadingStatus}
         />
 
         <CommitMessage

app/src/ui/changes/sidebar.tsx

@@ -51,6 +51,7 @@ interface IChangesSidebarProps {
   readonly isCommitting: boolean
   readonly isPushPullFetchInProgress: boolean
   readonly gitHubUserStore: GitHubUserStore
+  readonly isLoadingStatus: boolean
 }
 
 export class ChangesSidebar extends React.Component<IChangesSidebarProps, {}> {
@@ -298,6 +299,7 @@ export class ChangesSidebar extends React.Component<IChangesSidebarProps, {}> {
           onCreateSketchFile={this.onCreateSketchFile}
         />
         <ChangesList
+          isLoadingStatus={this.props.isLoadingStatus}
           dispatcher={this.props.dispatcher}
           repository={this.props.repository}
           workingDirectory={changesState.workingDirectory}

app/src/ui/list.tsx

@@ -4,6 +4,7 @@ import * as classNames from 'classnames'
 import { Grid, AutoSizer } from 'react-virtualized'
 import { shallowEquals } from '../lib/equality'
 import { createUniqueId, releaseUniqueId } from './lib/id-pool'
+import { Loading } from './lib/loading'
 
 /**
  * Describe the first argument given to the cellRenderer,
@@ -167,6 +168,8 @@ interface IListProps {
   readonly focusOnHover?: boolean
 
   readonly ariaMode?: 'list' | 'menu'
+
+  readonly loading?: boolean
 }
 
 interface IListState {
@@ -529,6 +532,15 @@ export class List extends React.Component<IListProps, IListState> {
         aria-activedescendant={activeDescendant}
       >
         {content}
+        {this.props.loading && this.renderLoading()}
+      </div>
+    )
+  }
+
+  private renderLoading() {
+    return (
+      <div className="list-loading">
+        <Loading />
       </div>
     )
   }

app/src/ui/repository.tsx

@@ -78,6 +78,7 @@ export class RepositoryView extends React.Component<IRepositoryProps, {}> {
     return (
       <ChangesSidebar
         repository={this.props.repository}
+        isLoadingStatus={this.props.state.isLoadingStatus}
         kactus={this.props.state.kactus}
         dispatcher={this.props.dispatcher}
         changes={this.props.state.changesState}

app/styles/ui/_list.scss

@@ -1,4 +1,5 @@
 .list {
+  position: relative;
   flex-grow: 1;
   height: 100%;
 
@@ -16,6 +17,21 @@
   .ReactVirtualized__Grid {
     background: var(--background-color);
   }
+
+  .list-loading {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    background: rgba(255, 255, 255, 0.8);
+
+    .spin {
+      margin-left: calc(50% - 8px);
+      margin-top: 30px;
+    }
+  }
 }
 
 @include win32-context {
@@ -33,10 +49,14 @@
     // with the height of the content in the main container.
 
     // Hide the actual scroll bar
-    .ReactVirtualized__Grid::-webkit-scrollbar { display: none; }
+    .ReactVirtualized__Grid::-webkit-scrollbar {
+      display: none;
+    }
 
     // Hide the scroll bar by default
-    .fake-scroll { display: none; }
+    .fake-scroll {
+      display: none;
+    }
 
     &:hover {
       .fake-scroll {
@@ -59,7 +79,6 @@
 }
 
 .list-item {
-
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -83,5 +102,7 @@
     }
   }
 
-  &:focus { outline: none; }
+  &:focus {
+    outline: none;
+  }
 }