From 18945205d3a13772cfa5824c7e5f12561a2cf827 Mon Sep 17 00:00:00 2001
From: Mikhail Mikheev <mmvsha73@gmail.com>
Date: Fri, 27 Sep 2019 18:42:57 +0400
Subject: [PATCH] show loader in send funds modal when lazy loading screens

---
 .../components/Balances/SendModal/index.jsx   | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/routes/safe/components/Balances/SendModal/index.jsx b/src/routes/safe/components/Balances/SendModal/index.jsx
index 2a5d5799..347f7bc7 100644
--- a/src/routes/safe/components/Balances/SendModal/index.jsx
+++ b/src/routes/safe/components/Balances/SendModal/index.jsx
@@ -1,6 +1,7 @@
 // @flow
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, Suspense } from 'react'
 import { List } from 'immutable'
+import CircularProgress from '@material-ui/core/CircularProgress'
 import cn from 'classnames'
 import { withStyles } from '@material-ui/core/styles'
 import { type Token } from '~/logic/tokens/store/model/token'
@@ -29,7 +30,7 @@ type Props = {
   tokens: List<Token>,
   selectedToken: string,
   createTransaction: Function,
-  activeScreenType: ActiveScreen
+  activeScreenType: ActiveScreen,
 }
 
 type TxStateType =
@@ -51,6 +52,14 @@ const styles = () => ({
   },
 })
 
+const loaderStyle = {
+  height: '500px',
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}
+
 const Send = ({
   onClose,
   isOpen,
@@ -90,11 +99,15 @@ const Send = ({
       description="Send Tokens Form"
       handleClose={onClose}
       open={isOpen}
-      paperClassName={cn(
-        scalableModalSize ? classes.scalableStaticModalWindow : classes.scalableModalWindow,
-      )}
+      paperClassName={cn(scalableModalSize ? classes.scalableStaticModalWindow : classes.scalableModalWindow)}
     >
-      <>
+      <Suspense
+        fallback={(
+          <div style={loaderStyle}>
+            <CircularProgress size={40} />
+          </div>
+        )}
+      >
         {activeScreen === 'chooseTxType' && <ChooseTxType onClose={onClose} setActiveScreen={setActiveScreen} />}
         {activeScreen === 'sendFunds' && (
           <SendFunds
@@ -144,7 +157,7 @@ const Send = ({
             createTransaction={createTransaction}
           />
         )}
-      </>
+      </Suspense>
     </Modal>
   )
 }