Skip render when home page is closing or redirecting (#9012)

The Home page component is responsible for closing the notification
window and triggering redirects in various situations. When this
happens, the home page is briefly rendered before the redirect/close
happens. This is a waste of cycles, and is distracting for users.

We now render nothing if the page is in the process of redirecting or
reloading. None of the redirects handled in this component are for sub-
pages, so we don't need the Home page to render in any of these cases.

We were already doing this for redirects to transaction confirmations,
but now we're taking the same approach for all redirects, and for the
cases where the window is closed.

ui/app/pages/home/home.component.js

@@ -56,51 +56,61 @@ export default class Home extends PureComponent {
     onTabClick: PropTypes.func.isRequired,
   }
 
-  UNSAFE_componentWillMount () {
+  state = {
-    const {
+    mounted: false,
-      history,
-      unconfirmedTransactionsCount = 0,
-      firstPermissionsRequestId,
-    } = this.props
-
-    if (firstPermissionsRequestId) {
-      history.push(`${CONNECT_ROUTE}/${firstPermissionsRequestId}`)
-    }
-
-    if (unconfirmedTransactionsCount > 0) {
-      history.push(CONFIRM_TRANSACTION_ROUTE)
-    }
   }
 
   componentDidMount () {
     const {
+      firstPermissionsRequestId,
       history,
       isNotification,
       suggestedTokens = {},
       totalUnapprovedCount,
+      unconfirmedTransactionsCount,
     } = this.props
 
+    this.setState({ mounted: true })
     if (isNotification && totalUnapprovedCount === 0) {
       global.platform.closeCurrentWindow()
-    }
+    } else if (firstPermissionsRequestId) {
-
+      history.push(`${CONNECT_ROUTE}/${firstPermissionsRequestId}`)
-    // suggested new tokens
+    } else if (unconfirmedTransactionsCount > 0) {
-    if (Object.keys(suggestedTokens).length > 0) {
+      history.push(CONFIRM_TRANSACTION_ROUTE)
+    } else if (Object.keys(suggestedTokens).length > 0) {
       history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE)
     }
   }
 
-  componentDidUpdate () {
+  static getDerivedStateFromProps (
-    const {
+    {
+      firstPermissionsRequestId,
       isNotification,
+      suggestedTokens,
+      totalUnapprovedCount,
+      unconfirmedTransactionsCount,
+    },
+    { mounted },
+  ) {
+    if (!mounted) {
+      if (isNotification && totalUnapprovedCount === 0) {
+        return { closing: true }
+      } else if (firstPermissionsRequestId || unconfirmedTransactionsCount > 0 || Object.keys(suggestedTokens).length > 0) {
+        return { redirecting: true }
+      }
+    }
+    return null
+  }
+
+  componentDidUpdate (_, prevState) {
+    const {
       setupThreeBox,
       showRestorePrompt,
       threeBoxLastUpdated,
       threeBoxSynced,
-      totalUnapprovedCount,
     } = this.props
 
-    if (isNotification && totalUnapprovedCount === 0) {
+    if (!prevState.closing && this.state.closing) {
       global.platform.closeCurrentWindow()
     }
 
@@ -228,9 +238,7 @@ export default class Home extends PureComponent {
 
     if (forgottenPassword) {
       return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />
-    } else if (history.location.pathname.match(/^\/confirm-transaction/)) {
+    } else if (this.state.closing || this.state.redirecting) {
-      // This should only happen if this renders during the redirect to the confirm page
-      // Display nothing while the confirm page loads, to avoid side-effects of rendering normal home view
       return null
     }