Merge pull request #84 from which-ecosystem/dyno-wakeup

Wakeup dyno before showing layout

10 files changed, 197 insertions, 80 deletions

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 @@
+<svg id="b49f4f68-d79e-4476-a14b-b3f27440c724" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="995.00139" height="836.74873" viewBox="0 0 995.00139 836.74873"><title>coffee break</title><path d="M813.829,123.00305C728.84365,122.61259,652.46167,159.695,600,218.77294c-52.46166-59.078-128.84361-96.16033-213.829-95.76989C226.58573,123.73624,99.4,255.11349,102.55682,415.7889,105.61848,571.62246,232.01956,697,387.5,697q9.04848,0,17.95993-.56082a3110.9144,3110.9144,0,0,1,389.08014,0q8.90871.558,17.95993.56082c155.48048,0,281.88149-125.37751,284.94318-281.211C1100.6,255.11355,973.41432,123.73626,813.829,123.00305Z" transform="translate(-102.4993 -31.62564)" fill="#f2f2f2"/><path d="M759.88065,39.083a22.98206,22.98206,0,0,0-19.80994,13.851c-4.9535,11.97382,1.42449,26.03885,10.999,34.77028s21.87358,13.72225,33.04831,20.28234c15.00952,8.81128,28.4968,21.04282,36.00691,36.74386s8.30888,35.15009-.51891,50.14991c-8.1937,13.9224-23.09255,22.2549-37.30219,29.9397" transform="translate(-102.4993 -31.62564)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><ellipse cx="670.0007" cy="8.5" rx="17.5" ry="8.5" fill="#57b894"/><ellipse cx="684.0007" cy="64.5" rx="17.5" ry="8.5" fill="#57b894"/><ellipse cx="652.0007" cy="73.5" rx="17.5" ry="8.5" fill="#57b894"/><ellipse cx="702.0007" cy="120.5" rx="17.5" ry="8.5" fill="#57b894"/><ellipse cx="737.0007" cy="120.5" rx="17.5" ry="8.5" fill="#57b894"/><path d="M852.36056,317.873a22.982,22.982,0,0,0-23.90166,3.6047c-9.75859,8.52522-10.29541,23.95946-5.59844,36.03621s13.49695,22.01331,20.59236,32.856c9.53031,14.56357,16.177,31.51463,15.92735,48.91757s-8.17714,35.181-22.75119,44.69525c-13.52721,8.8309-30.577,9.67444-46.7215,10.24405" transform="translate(-102.4993 -31.62564)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><ellipse cx="863.20203" cy="324.41495" rx="8.5" ry="17.5" transform="translate(86.47962 921.90457) rotate(-63.61541)" fill="#57b894"/><ellipse cx="850.85759" cy="380.80302" rx="8.5" ry="17.5" transform="translate(29.10678 942.17557) rotate(-63.61541)" fill="#57b894"/><ellipse cx="818.19144" cy="374.64489" rx="8.5" ry="17.5" transform="translate(16.47393 909.49071) rotate(-63.61541)" fill="#57b894"/><ellipse cx="842.09647" cy="438.96867" rx="8.5" ry="17.5" transform="translate(-27.86756 966.64426) rotate(-63.61541)" fill="#57b894"/><ellipse cx="873.45057" cy="454.52247" rx="8.5" ry="17.5" transform="translate(-24.38063 1003.37402) rotate(-63.61541)" fill="#57b894"/><path d="M400.50311,398.03475a22.982,22.982,0,0,1,23.543-5.47806c12.21732,4.31817,18.41669,18.46285,18.51229,31.42048s-4.41219,25.44182-7.00123,38.13852c-3.47752,17.05378-3.39352,35.26119,3.26612,51.34142s20.59278,29.67328,37.65037,33.132c15.83237,3.21032,31.98817-2.303,47.20155-7.73649" transform="translate(-102.4993 -31.62564)" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><ellipse cx="392.84443" cy="408.11838" rx="17.5" ry="8.5" transform="translate(-275.79024 395.93782) rotate(-48.05964)" fill="#57b894"/><ellipse cx="425.14252" cy="455.96013" rx="17.5" ry="8.5" transform="translate(-300.66544 435.82886) rotate(-48.05964)" fill="#57b894"/><ellipse cx="453.22451" cy="438.17244" rx="17.5" ry="8.5" transform="translate(-278.12103 450.81822) rotate(-48.05964)" fill="#57b894"/><ellipse cx="454.76719" cy="506.77725" rx="17.5" ry="8.5" transform="translate(-328.64047 474.71805) rotate(-48.05964)" fill="#57b894"/><ellipse cx="431.3747" cy="532.81168" rx="17.5" ry="8.5" transform="translate(-355.7639 465.95191) rotate(-48.05964)" fill="#57b894"/><path d="M802.98,282.5856l-2.75,20.17-17,124.46-27.84,203.82-6.97,51.03a16.25533,16.25533,0,0,1-16.11,14.06H546.66a16.26025,16.26025,0,0,1-16.11-14.02l-7.09-51.07-28.31-203.82-17.3-124.55-2.78-20.04a16.25518,16.25518,0,0,1,16.1-18.5h295.7A16.2658,16.2658,0,0,1,802.98,282.5856Z" transform="translate(-102.4993 -31.62564)" fill="#00796b"/><rect x="392.0007" y="178.5" width="290" height="54" rx="16.26001" fill="#2f2e41"/><path d="M784.5,235.6456v12.22a16.26023,16.26023,0,0,1-16.26,16.26H510.76a16.26023,16.26023,0,0,1-16.26-16.26v-12.19A1526.99976,1526.99976,0,0,0,784.5,235.6456Z" transform="translate(-102.4993 -31.62564)" opacity="0.1"/><circle cx="459.5007" cy="343" r="44" fill="#2f2e41"/><circle cx="615.5007" cy="343" r="44" fill="#2f2e41"/><circle cx="457.5007" cy="343" r="12" fill="#fff"/><circle cx="475.5007" cy="320" r="5" fill="#fff"/><circle cx="615.5007" cy="343" r="12" fill="#fff"/><circle cx="633.5007" cy="320" r="5" fill="#fff"/><path d="M802.05542,274.62564h.00195c-.00464-.01227-.01062-.02387-.01532-.03608a16.2567,16.2567,0,0,0-1.64135-3.186l-.00171-.00268c-.19605-.29456-.40326-.57953-.61774-.86048-.07153-.094-.14526-.186-.21875-.27844a16.37183,16.37183,0,0,0-2.07257-2.16065c-.16858-.14666-.33856-.29126-.51318-.431-.19611-.15643-.39338-.31012-.59681-.45758-.25433-.18487-.51678-.35864-.78216-.52887-.20935-.13391-.41937-.26538-.63532-.38983q-.50005-.28922-1.02166-.54406c-.166-.08039-.33429-.15522-.50342-.23011q-.49851-.22137-1.01489-.40863c-.13874-.05047-.2746-.10577-.41517-.15252q-.71457-.23841-1.45861-.41089c-.12146-.02808-.24573-.048-.36823-.07337q-.60846-.126-1.2337-.20569c-.15082-.01922-.30091-.03875-.45307-.05377-.53393-.05292-1.07306-.08923-1.62249-.08929l-.00122-.00006H491.17a16.3036,16.3036,0,0,0-16.10113,18.49572l.4696,3.38111L477.85,302.66561l.0028.00025L495.15137,427.2156H495.15l22.70832,163.49011,12.69409,91.39765a16.25911,16.25911,0,0,0,16.10449,14.02228h8.81024a16.24007,16.24007,0,0,1-.91473-3.52228l-8.55109-61.56775H755.39l27.84-203.82H517.69305L500.67133,304.65933A1718.367,1718.367,0,0,0,800.23,302.75564l2.75-20.17A16.13653,16.13653,0,0,0,802.05542,274.62564Z" transform="translate(-102.4993 -31.62564)" opacity="0.1"/><path d="M826.241,291.12564a1720.99323,1720.99323,0,0,1-373.48194,0,16.259,16.259,0,0,1-16.259-16.259v-21.482a16.259,16.259,0,0,1,16.259-16.259,1530.24921,1530.24921,0,0,0,373.48194,0,16.259,16.259,0,0,1,16.259,16.259v21.482A16.259,16.259,0,0,1,826.241,291.12564Z" transform="translate(-102.4993 -31.62564)" fill="#2f2e41"/><path d="M763.03436,623.62564H513.04926a9.42768,9.42768,0,0,1-9.31112-7.94974L476.73105,445.53128a9.42769,9.42769,0,0,1,9.31113-10.90564H791.84191a9.42769,9.42769,0,0,1,9.2954,11.00151L772.32975,615.77177A9.42769,9.42769,0,0,1,763.03436,623.62564Z" transform="translate(-102.4993 -31.62564)" fill="#2f2e41"/><path d="M734.58885,502.34659a6.66219,6.66219,0,0,1,3.65312,11.12c-15.86094,16.90694-54.3184,52.159-99.242,52.159s-83.381-35.25209-99.242-52.159a6.66219,6.66219,0,0,1,3.65312-11.12,528.227,528.227,0,0,1,191.1777,0Z" transform="translate(-102.4993 -31.62564)" fill="#00796b"/><path d="M688.99819,512.88966a6.663,6.663,0,0,1,3.62123,11.33167c-10.741,10.47261-30.73195,26.26412-53.61942,26.26412s-42.87837-15.79151-53.61942-26.26412a6.663,6.663,0,0,1,3.62123-11.33167,305.15552,305.15552,0,0,1,99.99638,0Z" transform="translate(-102.4993 -31.62564)" fill="#fff"/><line x1="126.5007" y1="665" x2="817.5007" y2="665" fill="none" stroke="#3f3d56" stroke-miterlimit="10"/><path d="M286.15186,604.07028V632.201l14.44548,16.72634s6.0823-2.28087,6.0823-17.48663l2.28087-22.04837Z" transform="translate(-102.4993 -31.62564)" fill="#a0616a"/><path d="M300.59734,632.201s-23.56894-15.96606-24.32923-21.28808-34.213-29.65125-28.891-14.44548,22.04836,22.04836,22.04836,22.04836,12.92491,34.97327,24.32923,34.213S305.15907,637.523,300.59734,632.201Z" transform="translate(-102.4993 -31.62564)" fill="#a0616a"/><polygon points="211.783 771.64 214.064 785.325 201.899 782.284 201.899 771.64 211.783 771.64" fill="#3f3d56"/><path d="M312.00166,810.86873s-14.05972-8.32964-14.63274-4.545-6.65533,18.23015-9.69649,19.75073-6.84259,18.24692,0,17.48663c5.29967-.58885,24.73757-10.75521,33.23418-15.31008a4.64254,4.64254,0,0,0,1.99621-6.067,9.579,9.579,0,0,1-1.01741-2.95218C321.88541,817.71133,312.00166,810.86873,312.00166,810.86873Z" transform="translate(-102.4993 -31.62564)" fill="#2f2e41"/><path d="M318.84426,656.53018s-55.50106,25.84981-50.179,45.61731,25.08952,103.39922,25.08952,103.39922,22.04837,5.322,23.56894,0-14.44548-88.19345-12.9249-91.23461S334.05,691.50345,334.05,691.50345L391.832,667.17422l-24.32923-22.80865Z" transform="translate(-102.4993 -31.62564)" fill="#2f2e41"/><polygon points="174.529 776.202 167.686 793.689 179.851 799.011 187.454 785.325 174.529 776.202" fill="#3f3d56"/><path d="M318.084,531.84288s6.8426,9.12347,1.52058,13.6852-1.52058,21.28807-1.52058,21.28807l6.8426,19.00721,27.37038-5.322V549.32952l-1.52058-15.20577s-13.68519-12.9249-15.20577-22.80865S318.084,531.84288,318.084,531.84288Z" transform="translate(-102.4993 -31.62564)" fill="#a0616a"/><path d="M318.084,531.84288s6.8426,9.12347,1.52058,13.6852-1.52058,21.28807-1.52058,21.28807l6.8426,19.00721,27.37038-5.322V549.32952l-1.52058-15.20577s-13.68519-12.9249-15.20577-22.80865S318.084,531.84288,318.084,531.84288Z" transform="translate(-102.4993 -31.62564)" opacity="0.1"/><path d="M363.70128,650.44788s-35.73356,39.535-35.73356,41.05557-19.00721,32.6924-19.00721,32.6924l-37.25413,82.87144s14.44548,19.7675,20.52778,18.24692,49.41875-89.714,49.41875-89.714,7.60289-19.7675,28.13067-24.32923,36.49385-20.52779,28.891-38.77471S363.70128,650.44788,363.70128,650.44788Z" transform="translate(-102.4993 -31.62564)" fill="#2f2e41"/><circle cx="215.58467" cy="481.21004" r="24.32923" fill="#a0616a"/><path d="M318.84426,552.37067s3.04115,17.48663,6.08231,19.00721,5.322,6.8426,12.16461-.76029,12.9249-22.80865,12.9249-22.80865l23.569,28.891,2.28086,79.83028s-26.61009-6.84259-34.97327,0-26.61009,6.08231-26.61009,6.08231l3.80144-15.20577-3.04115-25.8498.76029-23.56894.76028-16.72635Z" transform="translate(-102.4993 -31.62564)" fill="#f2f2f2"/><path d="M321.52262,539.57351s-10.28124,5.19428-11.04153,8.23543-14.44548,9.12346-14.44548,9.12346-5.322,5.322-5.322,8.36317S308.96051,603.31,308.96051,603.31s3.80144,23.56894,2.28087,28.13067,3.04115,22.04836,3.04115,22.04836l-9.12346,10.644h8.36317s9.12346-4.56173,9.12346-6.8426-1.52058-18.24692-2.28086-25.08951-.76029-31.17183.76028-39.535.76029-30.41154.76029-35.73356S321.52262,539.57351,321.52262,539.57351Z" transform="translate(-102.4993 -31.62564)" fill="#3f3d56"/><path d="M345.07421,528.02893s3.4213.7728,13.305,3.814,25.08951,7.60289,30.41153,13.6852a94.24729,94.24729,0,0,1,9.88375,14.44548l-3.04115,54.74076s6.08231,11.40433,5.322,17.48664-6.8426,6.84259-2.28087,19.76749,13.68519,24.32923,5.322,25.84981-30.41153-3.80144-40.29528-.76029-21.28808-11.40432-21.28808-11.40432,15.20577,1.52057,12.9249-4.56174-27.37038-74.50826-22.04836-89.714S345.07421,528.02893,345.07421,528.02893Z" transform="translate(-102.4993 -31.62564)" fill="#3f3d56"/><path d="M294.515,561.49413l-3.80144,3.04116s-10.644,38.01442-7.60289,41.81586,27.37039,12.16461,28.891,6.84259S294.515,561.49413,294.515,561.49413Z" transform="translate(-102.4993 -31.62564)" fill="#3f3d56"/><path d="M407.03772,588.10423s11.40432,32.6924,11.40432,41.81586-1.52058,62.34365-1.52058,62.34365-.76028,22.80865-16.72634,13.68519,0-15.20577,0-15.20577-.76029-60.06278-6.8426-68.42595-8.36317-20.52779-8.36317-20.52779Z" transform="translate(-102.4993 -31.62564)" fill="#a0616a"/><path d="M282.35042,824.55392s-11.40433-6.0823-13.6852-1.52057-14.44548,29.65125-12.9249,32.6924,9.88375,15.20577,19.7675,12.16461,10.644-19.00721,10.644-19.00721l.76029-18.24692Z" transform="translate(-102.4993 -31.62564)" fill="#2f2e41"/><path d="M313.31994,506.95891c1.6759.78886,3.664,1.2602,4.71714,2.784.78033,1.1291.8579,2.59638,1.42727,3.84522a5.43744,5.43744,0,0,0,6.99527,2.55818,6.03223,6.03223,0,0,1,2.45993-3.73583,3.583,3.583,0,0,1,4.25368.23352c1.56706,1.494,1.01244,4.09923,1.74363,6.1371a12.95311,12.95311,0,0,0,2.78617,3.82048c1.66408,1.92,2.9898,4.17181,4.99378,5.73377s5.043,2.23889,7.03394.66032c1.6741-1.32737,2.02109-3.77624,1.61458-5.87368s-1.41475-4.02891-1.98336-6.08833c-1.84761-6.69179,1.098-13.83608.18662-20.71818-1.16775-8.81839-8.66294-15.784-17.02889-18.807a19.922,19.922,0,0,0-10.99393-1.16482c-3.82594.85429-7.09438,3.29007-10.75866,4.68315-3.91853,1.48974-8.17957,1.74987-12.28027,2.62079s-8.32062,2.55482-10.70025,6.00614c-1.65974,2.40721-2.23022,5.39673-3.60572,7.97693a14.311,14.311,0,0,1-7.24878,6.49424l4.33481-.24707a12.777,12.777,0,0,1-3.45385,5.04091,9.26945,9.26945,0,0,0,6.00092-.79323,6.52323,6.52323,0,0,1-2.23734,4.67625c3.33564-.10048,6.85319-.25422,9.67172-2.041,1.38059-.87519,2.50644-2.09416,3.8056-3.08621,2.7692-2.11458,6.20478-3.11829,9.55388-4.07948,1.7586-.50471,3.87536-1.20653,5.46579-.0755C311.39806,504.46152,311.60717,506.15268,313.31994,506.95891Z" transform="translate(-102.4993 -31.62564)" fill="#2f2e41"/><path d="M387.27022,550.85009l11.40432,9.12347,15.20577,34.97326s-21.28807,16.72635-26.61009,14.44548-14.44548-42.57615-14.44548-42.57615Z" transform="translate(-102.4993 -31.62564)" fill="#3f3d56"/><path d="M273.91,586.17171l-.19054,1.39753-1.17788,8.6235-1.929,14.12215-.48293,3.53574a1.12631,1.12631,0,0,1-1.11622.97418h-12.8632a1.12662,1.12662,0,0,1-1.11622-.97141l-.49125-3.53851-1.96152-14.12215-1.19868-8.62974-.19261-1.38852a1.12628,1.12628,0,0,1,1.11552-1.28182H272.7938A1.127,1.127,0,0,1,273.91,586.17171Z" transform="translate(-102.4993 -31.62564)" fill="#00796b"/><rect x="150.03694" y="549.52551" width="20.09334" height="3.74152" rx="1.12661" fill="#2f2e41"/><path d="M275.52171,586.76342a119.24225,119.24225,0,0,1-25.87758,0,1.12654,1.12654,0,0,1-1.12655-1.12654v-1.48843a1.12655,1.12655,0,0,1,1.12655-1.12655,106.0267,106.0267,0,0,0,25.87758,0,1.12655,1.12655,0,0,1,1.12654,1.12655v1.48843A1.12654,1.12654,0,0,1,275.52171,586.76342Z" transform="translate(-102.4993 -31.62564)" fill="#2f2e41"/><path d="M271.14229,609.80147H253.82148a.65322.65322,0,0,1-.64515-.55081l-1.87125-11.78888a.65323.65323,0,0,1,.64515-.75562h21.18806a.65322.65322,0,0,1,.644.76227l-1.996,11.78887A.65322.65322,0,0,1,271.14229,609.80147Z" transform="translate(-102.4993 -31.62564)" fill="#2f2e41"/></svg>
\ No newline at end of file
diff --git a/src/components/EmptyState/EmptyState.tsx b/src/components/EmptyState/EmptyState.tsx
index 214bb56..f79a391 100644
--- a/src/components/EmptyState/EmptyState.tsx
+++ b/src/components/EmptyState/EmptyState.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
+
+import Message from '../Message/Message';
 import noContentIcon from '../../assets/noContent.svg';
 import constructionIcon from '../../assets/construction.svg';
 
@@ -11,17 +12,9 @@ interface PropTypes {
 }
 
 const useStyles = makeStyles(theme => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
   img: {
-    margin: theme.spacing(2),
     width: theme.spacing(24)
   }
-
 }));
 
 const CONTEXT = {
@@ -37,21 +30,12 @@ const CONTEXT = {
 
 const EmptyState: React.FC<PropTypes> = ({ variant = 'default', message }) => {
   const classes = useStyles();
-
   const { icon, tagline } = CONTEXT[variant];
 
   return (
-    <div className={classes.root}>
+    <Message tagline={tagline} message={message}>
       <img src={icon} className={classes.img} alt="No content" />
-      <Typography variant="h5">
-        {tagline}
-      </Typography>
-      <Typography color="textSecondary">
-        <p>
-          {message}
-        </p>
-      </Typography>
-    </div>
+    </Message>
   );
 };
 
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
index 34d436b..fac0049 100644
--- a/src/components/Loading/Loading.tsx
+++ b/src/components/Loading/Loading.tsx
@@ -1,22 +1,17 @@
 import React from 'react';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import { makeStyles } from '@material-ui/core';
+import Message from '../Message/Message';
 
-const useStyles = makeStyles(theme => ({
-  loader: {
-    width: '100%',
-    textAlign: 'center',
-    marginTop: theme.spacing(10)
-  }
-}));
-
-const Loading: React.FC = React.memo(() => {
-  const classes = useStyles();
+interface PropTypes {
+  tagline?: string;
+  message?: string;
+}
 
+const Loading: React.FC<PropTypes> = React.memo(({ tagline, message }) => {
   return (
-    <div className={classes.loader}>
-      <CircularProgress color="primary" style={{ margin: '0 auto' }} />
-    </div>
+    <Message tagline={tagline} message={message}>
+      <CircularProgress color="primary" />
+    </Message>
   );
 });
 
diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx
new file mode 100644
index 0000000..f568552
--- /dev/null
+++ b/src/components/Message/Message.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+
+
+interface PropTypes {
+  tagline?: string;
+  message?: string;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: theme.spacing(6)
+  },
+  content: {
+    margin: theme.spacing(2)
+  }
+}));
+
+const Message: React.FC<PropTypes> = React.memo(({ tagline, message, children }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.content}>
+        {children}
+      </div>
+      <Typography variant="h5">
+        {tagline}
+      </Typography>
+      <Typography color="textSecondary">
+        {message}
+      </Typography>
+    </div>
+  );
+});
+
+export default Message;
diff --git a/src/containers/Notifications/Notifications.tsx b/src/containers/Notifications/Notifications.tsx
index 2a9ea13..655e7be 100644
--- a/src/containers/Notifications/Notifications.tsx
+++ b/src/containers/Notifications/Notifications.tsx
@@ -4,7 +4,7 @@ import EmptyState from '../../components/EmptyState/EmptyState';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    marginTop: theme.spacing(25)
+    marginTop: theme.spacing(16)
   }
 }));
 
diff --git a/src/containers/Page/DynoWaiter.tsx b/src/containers/Page/DynoWaiter.tsx
new file mode 100644
index 0000000..05d269f
--- /dev/null
+++ b/src/containers/Page/DynoWaiter.tsx
@@ -0,0 +1,83 @@
+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;
+
+const messages = [
+  '',
+  'It looks like our server is sleeping.',
+  `We need about ${DYNO_WAKEUP_TIME} seconds to wake it up.`,
+  'Please, stay with us.',
+  'We love you <3',
+  'Almost done.'
+];
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    textAlign: 'center'
+  },
+  hidden: {
+    visibility: 'hidden',
+    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);
+  const [time, setTime] = useState<number>(0);
+
+  const tick = useCallback((): void => setTime(value => value + 1), [setTime]);
+
+  useEffect(() => {
+    const interval = setInterval(tick, 1000);
+    get('/ping').then(() => {
+      setIsReady(true);
+      clearInterval(interval);
+    });
+    return () => clearInterval(interval);
+  }, [setIsReady, tick]);
+
+  const message = useMemo(() => {
+    const interval = DYNO_WAKEUP_TIME / messages.length;
+    const index = Math.floor(time / interval);
+    const lastIndex = messages.length - 1;
+    return messages[index > lastIndex ? lastIndex : index];
+  }, [time]);
+
+  return (
+    <>
+      {!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>
+    </>
+  );
+};
+
+
+export default DynoWaiter;
+
diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx
index 023d86e..475f76d 100644
--- a/src/containers/Page/Page.tsx
+++ b/src/containers/Page/Page.tsx
@@ -2,30 +2,24 @@ import React, { Suspense, useEffect } from 'react';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useMediaQuery } from '@material-ui/core';
 import { SnackbarProvider } from 'notistack';
-import { Switch, Route, useHistory } from 'react-router-dom';
-import Loading from '../../components/Loading/Loading';
+import { useHistory } from 'react-router-dom';
 
-const Profile = React.lazy(() => import('../Profile/Profile'));
-const Feed = React.lazy(() => import('../Feed/Feed'));
-const Login = React.lazy(() => import('../Login/Login'));
-const Registration = React.lazy(() => import('../Registration/Registration'));
-const Home = React.lazy(() => import('../Home/Home'));
-const Notifications = React.lazy(() => import('../Notifications/Notifications'));
-const PollCreation = React.lazy(() => import('../PollCreation/PollCreation'));
+import Router from './Router';
+import DynoWaiter from './DynoWaiter';
+import Loading from '../../components/Loading/Loading';
 
 
 const useStyles = makeStyles(theme => ({
   root: {
     [theme.breakpoints.down('sm')]: {
-      margin: theme.spacing(10, 0, 12, 0)
+      padding: theme.spacing(10, 0, 12, 0)
     },
     [theme.breakpoints.up('md')]: {
-      margin: theme.spacing(15, 5, 8, 5)
+      padding: theme.spacing(15, 5, 8, 5)
     }
   }
 }));
 
-
 const Page: React.FC = () => {
   const classes = useStyles();
   const theme = useTheme();
@@ -49,15 +43,9 @@ const Page: React.FC = () => {
     >
       <div className={classes.root}>
         <Suspense fallback={<Loading />}>
-          <Switch>
-            <Route exact path="/" component={Home} />
-            <Route exact path="/login" component={Login} />
-            <Route exact path="/registration" component={Registration} />
-            <Route exact path="/feed" component={Feed} />
-            <Route exact path="/notifications" component={Notifications} />
-            <Route exact path="/new" component={PollCreation} />
-            <Route path="/profile/:username" component={Profile} />
-          </Switch>
+          <DynoWaiter>
+            <Router />
+          </DynoWaiter>
         </Suspense>
       </div>
     </SnackbarProvider>
diff --git a/src/containers/Page/Router.tsx b/src/containers/Page/Router.tsx
new file mode 100644
index 0000000..7067eea
--- /dev/null
+++ b/src/containers/Page/Router.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+
+const Profile = React.lazy(() => import('../Profile/Profile'));
+const Feed = React.lazy(() => import('../Feed/Feed'));
+const Login = React.lazy(() => import('../Login/Login'));
+const Registration = React.lazy(() => import('../Registration/Registration'));
+const Home = React.lazy(() => import('../Home/Home'));
+const Notifications = React.lazy(() => import('../Notifications/Notifications'));
+const PollCreation = React.lazy(() => import('../PollCreation/PollCreation'));
+
+
+const Router: React.FC = React.memo(() => (
+  <Switch>
+    <Route exact path="/" component={Home} />
+    <Route exact path="/login" component={Login} />
+    <Route exact path="/registration" component={Registration} />
+    <Route exact path="/feed" component={Feed} />
+    <Route exact path="/notifications" component={Notifications} />
+    <Route exact path="/new" component={PollCreation} />
+    <Route path="/profile/:username" component={Profile} />
+  </Switch>
+));
+
+
+export default Router;
+
diff --git a/src/containers/PollCreation/ImageInput.tsx b/src/containers/PollCreation/ImageInput.tsx
index cc60478..475d527 100644
--- a/src/containers/PollCreation/ImageInput.tsx
+++ b/src/containers/PollCreation/ImageInput.tsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import {
   CardActionArea,
-  CardMedia,
   Typography,
   CircularProgress
 } from '@material-ui/core';
@@ -10,6 +9,7 @@ import { Check, CancelOutlined } from '@material-ui/icons';
 
 import AttachLink from '../../components/AttachLink/AttachLink';
 import FileUpload from '../../components/FileUpload/FileUpload';
+import BackgroundImage from '../../components/Image/BackgroundImage';
 
 interface PropTypes {
   callback: (file?: File | string) => void;
@@ -28,19 +28,17 @@ const useStyles = makeStyles({
     opacity: '.5',
     fontSize: 50
   },
-  media: {
-    height: '100%',
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  darkOverlay: {
+  overlay: {
     backgroundColor: 'rgba(0, 0, 0, 0.45)',
     color: 'white',
     position: 'absolute',
     top: 0,
     left: 0,
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
     transitionDuration: '0.5s'
   },
   invisible: {
@@ -76,17 +74,16 @@ const ImageInput: React.FC<PropTypes> = ({ callback, progress }) => {
 
   const Media = (
     <CardActionArea onClick={handleClear} className={classes.root} disabled={Boolean(progress)}>
-      <CardMedia image={url} className={classes.media}>
-        <div className={`${classes.media} ${classes.darkOverlay} ${progress === 100 && classes.invisible}`}>
-          {
-            progress
-              ? progress < 100
-                ? <CircularProgress variant="static" value={progress} className={classes.icon} />
-                : <Check className={classes.icon} fontSize="large" />
-              : <CancelOutlined className={classes.icon} fontSize="large" />
-          }
-        </div>
-      </CardMedia>
+      <BackgroundImage src={url} />
+      <div className={`${classes.overlay} ${progress === 100 && classes.invisible}`}>
+        {
+          progress
+            ? progress < 100
+              ? <CircularProgress variant="static" value={progress} className={classes.icon} />
+              : <Check className={classes.icon} fontSize="large" />
+            : <CancelOutlined className={classes.icon} fontSize="large" />
+        }
+      </div>
     </CardActionArea>
   );
 
diff --git a/src/hooks/APIClient.ts b/src/hooks/APIClient.ts
index f66ef2e..cf5d247 100644
--- a/src/hooks/APIClient.ts
+++ b/src/hooks/APIClient.ts
@@ -10,17 +10,17 @@ export const useUser = (username: string | null): Response<User> => {
   return useSWR(
     username && `/users?username=${username}`,
     (url: string) => get(url).then(response => response.data[0])
-  ) as Response<User>;
+  );
 };
 
 export const useProfile = (id: string): Response<Poll[]> => {
-  return useSWR(id && `/profiles/${id}`, fetcher) as Response<Poll[]>;
+  return useSWR(id && `/profiles/${id}`, fetcher);
 };
 
 export const useFeed = (): Response<Poll[]> => {
-  return useSWR('/feed', fetcher, { revalidateOnFocus: false }) as Response<Poll[]>;
+  return useSWR('/feed', fetcher, { revalidateOnFocus: false });
 };
 
 export const useFeedback = (): Response<Feedback[]> => {
-  return useSWR('/feedback', fetcher) as Response<Feedback[]>;
+  return useSWR('/feedback', fetcher);
 };