Backport PR #893: Use animated icon as status indicator

Author: fcollonval

src/widgets/StatusWidget.ts renamed to src/components/StatusWidget.tsx

@@ -1,22 +1,23 @@
+import { ReactWidget } from '@jupyterlab/apputils';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { IStatusBar } from '@jupyterlab/statusbar';
-import { Widget } from '@lumino/widgets';
-import { statusWidgetClass } from '../style/StatusWidget';
+import React from 'react';
+import { gitIcon } from '../style/icons';
+import {
+  statusAnimatedIconClass,
+  statusIconClass
+} from '../style/StatusWidget';
 import { IGitExtension } from '../tokens';
 import { sleep } from '../utils';
 
-/**
- * Class for creating a status bar widget.
- */
-export class StatusWidget extends Widget {
+export class StatusWidget extends ReactWidget {
   /**
    * Returns a status bar widget.
    *
    * @returns widget
    */
   constructor() {
     super();
-    this.addClass(statusWidgetClass);
   }
 
   /**
@@ -25,16 +26,23 @@ export class StatusWidget extends Widget {
   set status(text: string) {
     this._status = text;
     if (!this._locked) {
-      this._lock();
-      this.refresh();
+      this._animate();
     }
   }
 
-  /**
-   * Refreshes the status widget.
-   */
-  refresh(): void {
-    this.node.textContent = 'Git: ' + this._status;
+  render(): JSX.Element {
+    return (
+      <div title={`Git: ${this._status}`}>
+        <gitIcon.react
+          className={
+            this._status !== 'idle' ? statusAnimatedIconClass : statusIconClass
+          }
+          left={'1px'}
+          top={'3px'}
+          stylesheet={'statusBar'}
+        />
+      </div>
+    );
   }
 
   /**
@@ -44,11 +52,12 @@ export class StatusWidget extends Widget {
    *
    * -   This is used to throttle updates in order to prevent "flashing" messages.
    */
-  async _lock(): Promise<void> {
+  async _animate(): Promise<void> {
     this._locked = true;
+    this.update();
     await sleep(500);
     this._locked = false;
-    this.refresh();
+    this.update();
   }
 
   /**

src/index.ts

@@ -16,13 +16,13 @@ import {
   addFileBrowserContextMenu,
   createGitMenu
 } from './commandsAndMenu';
+import { addStatusBarWidget } from './components/StatusWidget';
 import { GitExtension } from './model';
 import { getServerSettings } from './server';
 import { gitIcon } from './style/icons';
 import { Git, IGitExtension } from './tokens';
 import { addCloneButton } from './widgets/gitClone';
 import { GitWidget } from './widgets/GitWidget';
-import { addStatusBarWidget } from './widgets/StatusWidget';
 
 export { Git, IGitExtension } from './tokens';
 

src/style/StatusWidget.ts

@@ -1,8 +1,30 @@
-import { style } from 'typestyle';
+import { keyframes, style } from 'typestyle';
 
-export const statusWidgetClass = style({
-  color: 'var(--jp-ui-font-color1)',
-  fontFamily: 'var(--jp-ui-font-family)',
-  fontSize: 'var(--jp-ui-font-size1)',
-  lineHeight: '24px'
+const fillAnimation = keyframes({
+  to: { fillOpacity: 1 }
+});
+
+export const statusIconClass = style({
+  $nest: {
+    '& .jp-icon3': {
+      animationName: fillAnimation,
+      animationDuration: '1s'
+    }
+  }
+});
+
+const pathAnimation = keyframes({
+  '0%': { fillOpacity: 1 },
+  '50%': { fillOpacity: 0.6 },
+  '100%': { fillOpacity: 1 }
+});
+
+export const statusAnimatedIconClass = style({
+  $nest: {
+    '& .jp-icon3': {
+      animationName: pathAnimation,
+      animationDuration: '2s',
+      animationIterationCount: 'infinite'
+    }
+  }
 });