Merge pull request #4848 from MetaMask/fix-alert-flash

Fix Banner flash on load

3 files changed, 48 insertions, 8 deletions

diff --git a/app/scripts/controllers/detect-tokens.js b/app/scripts/controllers/detect-tokens.js
index b30dc00f1..195ec918a 100644
--- a/app/scripts/controllers/detect-tokens.js
+++ b/app/scripts/controllers/detect-tokens.js
@@ -117,7 +117,7 @@ class DetectTokensController {
       }
     })
   }
-  
+
   /**
    * Internal isActive state
    * @type {Object}
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 3b303a95c..bcc7075c2 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -1436,7 +1436,7 @@ module.exports = class MetamaskController extends EventEmitter {
   }
 
   /**
-   * A method for activating the retrieval of price data and auto detect tokens, 
+   * A method for activating the retrieval of price data and auto detect tokens,
    * which should only be fetched when the UI is visible.
    * @private
    * @param {boolean} active - True if price data should be getting fetched.
diff --git a/ui/app/components/alert/index.js b/ui/app/components/alert/index.js
index fc39d41e2..5620d847a 100644
--- a/ui/app/components/alert/index.js
+++ b/ui/app/components/alert/index.js
@@ -4,13 +4,53 @@ const h = require('react-hyperscript')
 
 class Alert extends Component {
 
+    constructor (props) {
+      super(props)
+
+      this.state = {
+        visble: false,
+        msg: false,
+        className: '',
+      }
+    }
+
+    componentWillReceiveProps (nextProps) {
+      if (!this.props.visible && nextProps.visible) {
+        this.animateIn(nextProps)
+      } else if (this.props.visible && !nextProps.visible) {
+        this.animateOut(nextProps)
+      }
+    }
+
+    animateIn (props) {
+      this.setState({
+        msg: props.msg,
+        visible: true,
+        className: '.visible',
+      })
+    }
+
+    animateOut (props) {
+      this.setState({
+        msg: null,
+        className: '.hidden',
+      })
+
+      setTimeout(_ => {
+        this.setState({visible: false})
+      }, 500)
+
+    }
+
     render () {
-        const className = `.global-alert${this.props.visible ? '.visible' : '.hidden'}`
-        return (
-            h(`div${className}`, {},
-              h('a.msg', {}, this.props.msg)
-            )
-        )
+        if (this.state.visible) {
+          return (
+              h(`div.global-alert${this.state.className}`, {},
+                h('a.msg', {}, this.state.msg)
+              )
+          )
+        }
+        return null
     }
 }