status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

16
src/components/Loader/index.tsx
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

13
src/components/Root/index.tsx
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 { 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>

4
src/components/ScanQRModal/index.tsx
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 { 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

4
src/components/Table/index.tsx
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 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 && (

9
src/routes/index.tsx
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 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) {

4
src/routes/safe/components/Balances/SendModal/index.tsx
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 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>
}
>

8
src/routes/safe/components/Settings/index.tsx
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 { 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}>

5
src/routes/safe/components/Transactions/TxList/TxCollapsed.tsx
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 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') && (

2
src/routes/safe/components/Transactions/TxList/styled.tsx
View File

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

4
yarn.lock
View File

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