From 3605a00b1399c4305ed54b65e500d8cfad35f5a7 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 15 Aug 2020 05:03:51 +0300 Subject: feat: add illustration to DynoWaiter --- src/assets/coffeeBreak.svg | 1 + src/containers/Page/DynoWaiter.tsx | 31 +++++++++++++++++++++++++------ 2 files changed, 26 insertions(+), 6 deletions(-) create mode 100644 src/assets/coffeeBreak.svg diff --git a/src/assets/coffeeBreak.svg b/src/assets/coffeeBreak.svg new file mode 100644 index 0000000..9cb0aed --- /dev/null +++ b/src/assets/coffeeBreak.svg @@ -0,0 +1 @@ +coffee break \ No newline at end of file diff --git a/src/containers/Page/DynoWaiter.tsx b/src/containers/Page/DynoWaiter.tsx index d8460bf..05d269f 100644 --- a/src/containers/Page/DynoWaiter.tsx +++ b/src/containers/Page/DynoWaiter.tsx @@ -1,7 +1,15 @@ -import React, { useEffect, useState, useCallback, useMemo } from 'react'; +import React, { + useEffect, + useState, + useCallback, + useMemo +} from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { get } from '../../requests'; import Loading from '../../components/Loading/Loading'; +import Image from '../../components/Image/Image'; +import Message from '../../components/Message/Message'; +import coffeIcon from '../../assets/coffeeBreak.svg'; const DYNO_WAKEUP_TIME = 30; @@ -10,7 +18,7 @@ const messages = [ 'It looks like our server is sleeping.', `We need about ${DYNO_WAKEUP_TIME} seconds to wake it up.`, 'Please, stay with us.', - 'You are doing good.', + 'We love you <3', 'Almost done.' ]; @@ -20,10 +28,18 @@ const useStyles = makeStyles(theme => ({ }, hidden: { visibility: 'hidden', - position: 'absolute' + position: 'absolute', + width: 0, + height: 0, + overflow: 'hidden' + }, + img: { + width: theme.spacing(24) } })); +// TODO: if Dyno is sleeping, use this time to pre-load pages + const DynoWaiter: React.FC = ({ children }) => { const classes = useStyles(); const [isReady, setIsReady] = useState(false); @@ -47,11 +63,14 @@ const DynoWaiter: React.FC = ({ children }) => { return messages[index > lastIndex ? lastIndex : index]; }, [time]); - const tagline = useMemo(() => time > 3 ? 'Waiting for the server' : '', [time]); - return ( <> - {!isReady && } + {!isReady && ( + <> + + {message && } + + )}
{children}
-- cgit v1.2.3