feat: add illustration to DynoWaiter

1 files changed, 25 insertions, 6 deletions

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<boolean>(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 && <Loading tagline={tagline} message={message} />}
+      {!isReady && (
+        <>
+          <Loading message={message} tagline={message && 'Waiting for the server'} />
+          {message && <Message><Image src={coffeIcon} className={classes.img} /></Message>}
+        </>
+      )}
       <div className={isReady ? '' : classes.hidden}>
         {children}
       </div>