Replace Loader by component from SRC (#2119)

* Table: replace CircularProgress compontent

* ScanQR: replace CircularProgress component

* Send Modal: replace CircularProgress component

* infinite scroll loader fix (scroll bounce)

* update the SRC dependency and replace CircularProgress component with Loader

package.json

@@ -161,7 +161,7 @@
     "@gnosis.pm/safe-apps-sdk": "1.0.3",
     "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#2e427ee",
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#b281238",
     "@gnosis.pm/util-contracts": "2.0.6",
     "@ledgerhq/hw-transport-node-hid-singleton": "5.45.0",
     "@material-ui/core": "^4.11.0",

src/components/Loader/index.tsx

@@ -1,16 +0,0 @@
-import CircularProgress from '@material-ui/core/CircularProgress'
-import * as React from 'react'
-
-import Page from 'src/components/layout/Page'
-
-const centerStyle = {
-  margin: 'auto 0',
-}
-
-const Loader = () => (
-  <Page align="center">
-    <CircularProgress size={60} style={centerStyle} />
-  </Page>
-)
-
-export default Loader

src/components/Root/index.tsx

@@ -1,4 +1,4 @@
-import { theme as styledTheme } from '@gnosis.pm/safe-react-components'
+import { theme as styledTheme, Loader } from '@gnosis.pm/safe-react-components'
 import { MuiThemeProvider } from '@material-ui/core/styles'
 import { ConnectedRouter } from 'connected-react-router'
 import React from 'react'
@@ -6,7 +6,7 @@ import { Provider } from 'react-redux'
 import { ThemeProvider } from 'styled-components'
 import * as Sentry from '@sentry/react'
 
-import Loader from 'src/components/Loader'
+import { LoadingContainer } from 'src/components/LoaderContainer'
 import App from 'src/components/App'
 import GlobalErrorBoundary from 'src/components/GlobalErrorBoundary'
 import AppRoutes from 'src/routes'
@@ -23,7 +23,14 @@ const Root = (): React.ReactElement => (
       <MuiThemeProvider theme={theme}>
         <ConnectedRouter history={history}>
           <Sentry.ErrorBoundary fallback={GlobalErrorBoundary}>
-            <App>{wrapInSuspense(<AppRoutes />, <Loader />)}</App>
+            <App>
+              {wrapInSuspense(
+                <AppRoutes />,
+                <LoadingContainer>
+                  <Loader size="md" />
+                </LoadingContainer>,
+              )}
+            </App>
           </Sentry.ErrorBoundary>
         </ConnectedRouter>
       </MuiThemeProvider>

src/components/ScanQRModal/index.tsx

@@ -1,4 +1,4 @@
-import CircularProgress from '@material-ui/core/CircularProgress'
+import { Loader } from '@gnosis.pm/safe-react-components'
 import IconButton from '@material-ui/core/IconButton'
 import { makeStyles } from '@material-ui/core/styles'
 import Close from '@material-ui/icons/Close'
@@ -83,7 +83,7 @@ export const ScanQRModal = ({ isOpen, onClose, onScan }: Props): React.ReactElem
         {error}
         {useWebcam === null ? (
           <Block className={classes.loaderContainer} justify="center">
-            <CircularProgress />
+            <Loader size="md" />
           </Block>
         ) : (
           <QrReader

src/components/Table/index.tsx

@@ -1,4 +1,4 @@
-import CircularProgress from '@material-ui/core/CircularProgress'
+import { Loader } from '@gnosis.pm/safe-react-components'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import TablePagination from '@material-ui/core/TablePagination'
@@ -168,7 +168,7 @@ class GnoTable extends React.Component<any, any> {
         )}
         {isEmpty && (
           <Row className={classes.loader} style={this.getEmptyStyle(emptyRows + 1)}>
-            <CircularProgress size={60} />
+            <Loader size="sm" />
           </Row>
         )}
         {!disablePagination && (

src/routes/index.tsx

@@ -4,10 +4,11 @@ import { Redirect, Route, Switch, useLocation, useRouteMatch } from 'react-route
 
 import { LOAD_ADDRESS, OPEN_ADDRESS, SAFELIST_ADDRESS, SAFE_PARAM_ADDRESS, WELCOME_ADDRESS } from './routes'
 
-import Loader from 'src/components/Loader'
+import { Loader } from '@gnosis.pm/safe-react-components'
 import { defaultSafeSelector } from 'src/logic/safe/store/selectors'
 import { useAnalytics } from 'src/utils/googleAnalytics'
 import { DEFAULT_SAFE_INITIAL_STATE } from 'src/logic/safe/store/reducer/safe'
+import { LoadingContainer } from 'src/components/LoaderContainer'
 
 const Welcome = React.lazy(() => import('./welcome/container'))
 
@@ -60,7 +61,11 @@ const Routes = (): React.ReactElement => {
           }
 
           if (defaultSafe === DEFAULT_SAFE_INITIAL_STATE) {
-            return <Loader />
+            return (
+              <LoadingContainer>
+                <Loader size="md" />
+              </LoadingContainer>
+            )
           }
 
           if (defaultSafe) {

src/routes/safe/components/Balances/SendModal/index.tsx

@@ -1,4 +1,4 @@
-import CircularProgress from '@material-ui/core/CircularProgress'
+import { Loader } from '@gnosis.pm/safe-react-components'
 import { makeStyles } from '@material-ui/core/styles'
 import React, { Suspense, useEffect, useState } from 'react'
 
@@ -116,7 +116,7 @@ const SendModal = ({
       <Suspense
         fallback={
           <div className={classes.loaderStyle}>
-            <CircularProgress size={40} />
+            <Loader size="md" />
           </div>
         }
       >

src/routes/safe/components/Settings/index.tsx

@@ -1,4 +1,5 @@
-import { IconText } from '@gnosis.pm/safe-react-components'
+import { IconText, Loader } from '@gnosis.pm/safe-react-components'
+import { LoadingContainer } from 'src/components/LoaderContainer'
 import Badge from '@material-ui/core/Badge'
 import { makeStyles } from '@material-ui/core/styles'
 import cn from 'classnames'
@@ -15,7 +16,6 @@ import ThresholdSettings from './ThresholdSettings'
 import RemoveSafeIcon from './assets/icons/bin.svg'
 import { styles } from './style'
 
-import Loader from 'src/components/Loader'
 import Block from 'src/components/layout/Block'
 import ButtonLink from 'src/components/layout/ButtonLink'
 import Col from 'src/components/layout/Col'
@@ -60,7 +60,9 @@ const Settings: React.FC = () => {
   const { menuOptionIndex, showRemoveSafe } = state
 
   return !owners ? (
-    <Loader />
+    <LoadingContainer>
+      <Loader size="md" />
+    </LoadingContainer>
   ) : (
     <>
       <Row className={classes.message}>

src/routes/safe/components/Transactions/TxList/TxCollapsed.tsx

@@ -1,6 +1,5 @@
-import { Dot, IconText as IconTextSrc, Text, Tooltip } from '@gnosis.pm/safe-react-components'
+import { Dot, IconText as IconTextSrc, Loader, Text, Tooltip } from '@gnosis.pm/safe-react-components'
 import { ThemeColors } from '@gnosis.pm/safe-react-components/dist/theme'
-import CircularProgress from '@material-ui/core/CircularProgress'
 import React, { ReactElement, useContext, useRef } from 'react'
 import styled from 'styled-components'
 
@@ -171,7 +170,7 @@ export const TxCollapsed = ({
     <div className="tx-status" ref={sameString(lastItemId, transaction.id) ? ref : null}>
       {transaction?.txStatus === 'PENDING' || transaction?.txStatus === 'PENDING_FAILED' ? (
         <CircularProgressPainter color={status.color}>
-          <CircularProgress size={14} color="inherit" />
+          <Loader size="xs" color="pending" />
         </CircularProgressPainter>
       ) : (
         (transaction?.txStatus === 'AWAITING_EXECUTION' || transaction?.txStatus === 'AWAITING_CONFIRMATIONS') && (

src/routes/safe/components/Transactions/TxList/styled.tsx

@@ -516,7 +516,7 @@ export const Centered = styled.div<{ padding?: number }>`
 
 export const HorizontallyCentered = styled(Centered)<{ isVisible: boolean }>`
   visibility: ${({ isVisible }) => (isVisible ? 'visible' : 'hidden')};
-  height: auto;
+  height: 100px;
 `
 
 export const StyledAccordionSummary = styled(AccordionSummary)`

yarn.lock

@@ -1596,9 +1596,9 @@
     solc "0.5.14"
     truffle "^5.1.21"
 
-"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#2e427ee":
+"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#b281238":
   version "0.5.0"
-  resolved "https://github.com/gnosis/safe-react-components.git#2e427ee36694c7964301fc155b0c080101a34bed"
+  resolved "https://github.com/gnosis/safe-react-components.git#b2812381a265e9b0a17abbc11392986e6c1c74b8"
   dependencies:
     classnames "^2.2.6"
     react-media "^1.10.0"