fix bug in animation

1 files changed, 22 insertions, 3 deletions

diff --git a/lib/wallet/chromeBadge.ts b/lib/wallet/chromeBadge.ts
index 2443378b2..c22608f85 100644
--- a/lib/wallet/chromeBadge.ts
+++ b/lib/wallet/chromeBadge.ts
@@ -34,9 +34,15 @@ export class ChromeBadge implements Badge {
   canvas: HTMLCanvasElement;
   ctx: CanvasRenderingContext2D;
   talerLogo: HTMLImageElement;
+  /**
+   * True if animation running.  The animation
+   * might still be running even if we're not busy anymore,
+   * just to transition to the "normal" state in a animated way.
+   */
+  animationRunning: boolean = false;
   isBusy: boolean = false;
   rotationAngle: number = 0;
-  static rotationAngleMax = 50000;
+  static rotationAngleMax = 1000;
 
   constructor() {
     let bg = chrome.extension.getBackgroundPage();
@@ -78,13 +84,20 @@ export class ChromeBadge implements Badge {
   }
 
   private animate() {
-    let bg: Window = chrome.extension.getBackgroundPage();
+    if (this.animationRunning) {
+      return;
+    }
+    this.animationRunning = true;
     let start: number|undefined = undefined;
     let step = (timestamp: number) => {
-      if (!start) {
+      if (!this.animationRunning) {
+        return;
+      }
+      if (!start) {console.log("r")
         start = timestamp;
       }
       let delta = (timestamp - start);
+      console.log("rotating by", timestamp);
       if (!this.isBusy && this.rotationAngle + delta >= ChromeBadge.rotationAngleMax) {
         // stop if we're close enough to origin
         this.rotationAngle = 0;
@@ -92,7 +105,10 @@ export class ChromeBadge implements Badge {
         this.rotationAngle = (this.rotationAngle + timestamp - start) % ChromeBadge.rotationAngleMax;
       }
       if (this.isBusy || this.rotationAngle != 0) {
+        start = timestamp;
         rAF(step);
+      } else {
+        this.animationRunning = false;
       }
       this.draw();
     };
@@ -108,6 +124,9 @@ export class ChromeBadge implements Badge {
   }
 
   startBusy() {
+    if (this.isBusy) {
+      return;
+    }
     this.isBusy = true;
     this.animate();
   }