Fix notification banner animation race condition

An animation is sometimes created that animates to the target height
before the proper height is calculated, so it animates to zero.
Afterwards, the proper height is calcuated and set, but the animation
would reset it to zero when it finishes.

1 files changed, 9 insertions, 4 deletions

diff --git a/gui/packages/desktop/src/renderer/components/NotificationBanner.js b/gui/packages/desktop/src/renderer/components/NotificationBanner.js
index 1e27712de7..7a784058c1 100644
--- a/gui/packages/desktop/src/renderer/components/NotificationBanner.js
+++ b/gui/packages/desktop/src/renderer/components/NotificationBanner.js
@@ -226,6 +226,7 @@ export class NotificationBanner extends Component<
     } else {
       this._didFinishFirstLayoutPass = true;
       if (this.props.visible) {
+        this._stopAnimation();
         this._heightValue.setValue(height);
       }
     }
@@ -237,10 +238,7 @@ export class NotificationBanner extends Component<
       return;
     }
 
-    if (this._animation) {
-      this._animation.stop();
-      this._animation = null;
-    }
+    this._stopAnimation();
 
     // calculate the animation duration based on travel distance
     const layout = await UserInterface.measureLayoutRelativeToWindow(containerView);
@@ -264,4 +262,11 @@ export class NotificationBanner extends Component<
       }
     });
   }
+
+  _stopAnimation() {
+    if (this._animation) {
+      this._animation.stop();
+      this._animation = null;
+    }
+  }
 }