status-im/safe-react
2
0
Fork 0
mirror of https://github.com/status-im/safe-react.git synced 2025-02-01 20:34:53 +00:00
Code Issues Projects Releases Wiki Activity

(Fix) - Shows a timeout message on app timeout (#1654)

Browse Source 
* Shows a timeout message on api timeout

* Improves loading text

* Improves clear timeout

* Fix typo

Co-authored-by: Daniel Sanchez <daniel.sanchez@gnosis.pm>
This commit is contained in:
Agustin Pane 2020-12-03 08:56:34 -03:00 committed by GitHub
parent 40e0a7b6fb
commit c0a8d24828
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/routes/safe/components/Apps/components/AppFrame.tsx
View File

@ -40,7 +40,8 @@ import { useLegalConsent } from '../hooks/useLegalConsent'
import LegalDisclaimer from './LegalDisclaimer'
import { APPS_STORAGE_KEY, getAppInfoFromUrl } from '../utils'
import { SafeApp, StoredSafeApp } from '../types.d'
import { LoadingContainer } from 'src/components/LoaderContainer'
import { LoadingContainer } from 'src/components/LoaderContainer/index'
import { TIMEOUT } from 'src/utils/constants'
const OwnerDisclaimer = styled.div`
display: flex;
@ -112,6 +113,23 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
const [isAppDeletable, setIsAppDeletable] = useState<boolean | undefined>()
const redirectToBalance = () => history.push(`${SAFELIST_ADDRESS}/${safeAddress}/balances`)
const timer = useRef<number>()
const [appTimeout, setAppTimeout] = useState(false)
useEffect(() => {
if (appIsLoading) {
timer.current = setTimeout(() => {
setAppTimeout(true)
}, TIMEOUT)
} else {
clearTimeout(timer.current)
setAppTimeout(false)
}
return () => {
clearTimeout(timer.current)
}
}, [appIsLoading])
const openConfirmationModal = useCallback(
(txs: Transaction[], params: SendTransactionParams | undefined, requestId: RequestId) =>
@ -235,7 +253,12 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
<StyledCard>
{appIsLoading && (
<LoadingContainer>
<LoadingContainer style={{ flexDirection: 'column' }}>
{appTimeout && (
<Title size="xs">
The safe-app is taking longer than usual to load. There might be a problem with the safe-app provider.
</Title>
)}
<Loader size="md" />
</LoadingContainer>
)}