[gnome-shell/wip/fmuellner/spinner: 2/2] animation: Optionally animate spinner start/stop

[Florian Müllner <fmuellner src gnome org>]

commit 4b6bf2a868a5b5a6fc31cd9e54b751aadfbb6824
Author: Florian Müllner <fmuellner gnome org>
Date:   Wed Nov 28 17:34:48 2018 +0100

    animation: Optionally animate spinner start/stop
    
    In contrast to generic animated icons, it is reasonable to expect
    spinners to be invisible while inactive. Implement that behavior
    in the new Spinner class and optionally animate the transitions.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/316

 js/ui/animation.js              | 41 +++++++++++++++++++++++++++++++++++++++++
 js/ui/components/keyring.js     | 28 ++++------------------------
 js/ui/components/polkitAgent.js | 29 ++++-------------------------
 3 files changed, 49 insertions(+), 49 deletions(-)
---
diff --git a/js/ui/animation.js b/js/ui/animation.js
index ebd7972c1..340364f53 100644
--- a/js/ui/animation.js
+++ b/js/ui/animation.js
@@ -8,7 +8,11 @@ const St = imports.gi.St;
 const Signals = imports.signals;
 const Atk = imports.gi.Atk;
 
+const Tweener = imports.ui.tweener;
+
 var ANIMATED_ICON_UPDATE_TIMEOUT = 16;
+var SPINNER_ANIMATION_TIME = 0.3;
+var SPINNER_ANIMATION_DELAY = 1.0;
 
 var Animation = new Lang.Class({
     Name: 'Animation',
@@ -95,5 +99,42 @@ var Spinner = new Lang.Class({
     _init(size) {
         let file = Gio.File.new_for_uri('resource:///org/gnome/shell/theme/process-working.svg');
         this.parent(file, size);
+
+        this.actor.opacity = 0;
+    },
+
+    play(animate) {
+        Tweener.removeTweens(this.actor);
+
+        if (animate) {
+            this.parent();
+            Tweener.addTween(this.actor, {
+                opacity: 255,
+                delay: SPINNER_ANIMATION_DELAY,
+                time: SPINNER_ANIMATION_TIME,
+                transition: 'linear'
+            });
+        } else {
+            this.actor.opacity = 255;
+            this.parent();
+        }
+    },
+
+    stop(animate) {
+        Tweener.removeTweens(this.actor);
+
+        if (animate) {
+            Tweener.addTween(this.actor, {
+                opacity: 0,
+                time: SPINNER_ANIMATION_TIME,
+                transition: 'linear',
+                onComplete: () => {
+                    this.stop(false);
+                }
+            });
+        } else {
+            this.actor.opacity = 0;
+            this.parent();
+        }
     }
 });
diff --git a/js/ui/components/keyring.js b/js/ui/components/keyring.js
index 037bc097a..974666c36 100644
--- a/js/ui/components/keyring.js
+++ b/js/ui/components/keyring.js
@@ -17,8 +17,6 @@ const CheckBox = imports.ui.checkBox;
 const Tweener = imports.ui.tweener;
 
 var WORK_SPINNER_ICON_SIZE = 16;
-var WORK_SPINNER_ANIMATION_DELAY = 1.0;
-var WORK_SPINNER_ANIMATION_TIME = 0.3;
 
 var KeyringDialog = new Lang.Class({
     Name: 'KeyringDialog',
@@ -69,27 +67,10 @@ var KeyringDialog = new Lang.Class({
         if (!this._workSpinner)
             return;
 
-        Tweener.removeTweens(this._workSpinner.actor);
-        if (working) {
-            this._workSpinner.play();
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 255,
-                               delay: WORK_SPINNER_ANIMATION_DELAY,
-                               time: WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear'
-                             });
-        } else {
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 0,
-                               time: WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear',
-                               onCompleteScope: this,
-                               onComplete() {
-                                   if (this._workSpinner)
-                                       this._workSpinner.stop();
-                               }
-                             });
-        }
+        if (working)
+            this._workSpinner.play(true);
+        else
+            this._workSpinner.stop(true);
     },
 
     _buildControlTable() {
@@ -115,7 +96,6 @@ var KeyringDialog = new Lang.Class({
             this._passwordEntry.clutter_text.connect('activate', this._onPasswordActivate.bind(this));
 
             this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE);
-            this._workSpinner.actor.opacity = 0;
 
             if (rtl) {
                 layout.attach(this._workSpinner.actor, 0, row, 1, 1);
diff --git a/js/ui/components/polkitAgent.js b/js/ui/components/polkitAgent.js
index 4bcbe30e7..5101180ea 100644
--- a/js/ui/components/polkitAgent.js
+++ b/js/ui/components/polkitAgent.js
@@ -25,8 +25,6 @@ const Tweener = imports.ui.tweener;
 var DIALOG_ICON_SIZE = 48;
 
 var WORK_SPINNER_ICON_SIZE = 16;
-var WORK_SPINNER_ANIMATION_DELAY = 1.0;
-var WORK_SPINNER_ANIMATION_TIME = 0.3;
 
 var AuthenticationDialog = new Lang.Class({
     Name: 'AuthenticationDialog',
@@ -118,8 +116,6 @@ var AuthenticationDialog = new Lang.Class({
                               { expand: true });
 
         this._workSpinner = new Animation.Spinner(WORK_SPINNER_ICON_SIZE);
-        this._workSpinner.actor.opacity = 0;
-
         this._passwordBox.add(this._workSpinner.actor);
 
         this.setInitialKeyFocus(this._passwordEntry);
@@ -163,27 +159,10 @@ var AuthenticationDialog = new Lang.Class({
     },
 
     _setWorking(working) {
-        Tweener.removeTweens(this._workSpinner.actor);
-        if (working) {
-            this._workSpinner.play();
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 255,
-                               delay: WORK_SPINNER_ANIMATION_DELAY,
-                               time: WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear'
-                             });
-        } else {
-            Tweener.addTween(this._workSpinner.actor,
-                             { opacity: 0,
-                               time: WORK_SPINNER_ANIMATION_TIME,
-                               transition: 'linear',
-                               onCompleteScope: this,
-                               onComplete() {
-                                   if (this._workSpinner)
-                                       this._workSpinner.stop();
-                               }
-                             });
-        }
+        if (working)
+            this._workSpinner.play(true);
+        else
+            this._workSpinner.stop(true);
     },
 
     performAuthentication() {