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
This commit is contained in:
Agustín Longoni 2021-04-14 04:02:07 -03:00 committed by GitHub
parent a995970d65
commit 3a117c51bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 34 additions and 37 deletions

View File

@ -161,7 +161,7 @@
"@gnosis.pm/safe-apps-sdk": "1.0.3", "@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-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
"@gnosis.pm/safe-contracts": "1.1.1-dev.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", "@gnosis.pm/util-contracts": "2.0.6",
"@ledgerhq/hw-transport-node-hid-singleton": "5.45.0", "@ledgerhq/hw-transport-node-hid-singleton": "5.45.0",
"@material-ui/core": "^4.11.0", "@material-ui/core": "^4.11.0",

View File

@ -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

View File

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

View File

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

View File

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

View File

@ -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 { 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 { defaultSafeSelector } from 'src/logic/safe/store/selectors'
import { useAnalytics } from 'src/utils/googleAnalytics' import { useAnalytics } from 'src/utils/googleAnalytics'
import { DEFAULT_SAFE_INITIAL_STATE } from 'src/logic/safe/store/reducer/safe' 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')) const Welcome = React.lazy(() => import('./welcome/container'))
@ -60,7 +61,11 @@ const Routes = (): React.ReactElement => {
} }
if (defaultSafe === DEFAULT_SAFE_INITIAL_STATE) { if (defaultSafe === DEFAULT_SAFE_INITIAL_STATE) {
return <Loader /> return (
<LoadingContainer>
<Loader size="md" />
</LoadingContainer>
)
} }
if (defaultSafe) { if (defaultSafe) {

View File

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

View File

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

View File

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

View File

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

View File

@ -1596,9 +1596,9 @@
solc "0.5.14" solc "0.5.14"
truffle "^5.1.21" 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" 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: dependencies:
classnames "^2.2.6" classnames "^2.2.6"
react-media "^1.10.0" react-media "^1.10.0"