diff --git a/app/javascript/components/bathroom.jsx b/app/javascript/components/bathroom.jsx
index 223bcfe7..bf3e4e06 100644
--- a/app/javascript/components/bathroom.jsx
+++ b/app/javascript/components/bathroom.jsx
@@ -2,8 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import gql from 'graphql-tag';
 import styled from 'styled-components';
+import { compose } from 'react-recompose';
 import { WhiteSubTitle, WhiteTitleLarge } from '@components/typography';
 import { LoadingMessage, ErrorMessage } from '@messages/default-messages';
+import renderWhileLoading from '@hocs/render-while-loading';
 import withFragment from './hocs/with-fragment';
 
 export const getBathroomCode = gql`
@@ -18,10 +20,7 @@ const Column = styled.div`
   margin-top: 100px;
 `;
 
-export const Bathroom = ({ loading, error, location }) => {
-  if (loading) {
-    return <LoadingMessage />;
-  }
+export const Bathroom = ({ error, location }) => {
   if (error) {
     return <ErrorMessage />;
   }
@@ -42,14 +41,15 @@ Bathroom.propTypes = {
   location: PropTypes.shape({
     bathroomCode: PropTypes.string,
   }),
-  loading: PropTypes.bool,
   error: PropTypes.bool,
 };
 
 Bathroom.defaultProps = {
   location: {},
-  loading: true,
   error: false,
 };
 
-export default withFragment({ location: getBathroomCode })(Bathroom);
+export default compose(
+  renderWhileLoading(LoadingMessage),
+  withFragment({ location: getBathroomCode }),
+)(Bathroom);
diff --git a/app/javascript/components/date.jsx b/app/javascript/components/date.jsx
index 2bc339e1..225ddc69 100644
--- a/app/javascript/components/date.jsx
+++ b/app/javascript/components/date.jsx
@@ -2,9 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import gql from 'graphql-tag';
 import styled from 'styled-components';
+import { compose } from 'react-recompose';
 import { dateForTimezone } from '@lib/datetime';
 import { colors, fontSizes, spacing, fonts } from '@lib/theme';
 import { LoadingMessage, ErrorMessage } from '@messages/default-messages';
+import renderWhileLoading from '@hocs/render-while-loading';
 import withFragment from './hocs/with-fragment';
 
 export const getTimeZone = gql`
@@ -22,7 +24,6 @@ export const DateText = styled.div`
 
 export class Date extends React.Component {
   static propTypes = {
-    loading: PropTypes.bool,
     error: PropTypes.bool,
     location: PropTypes.shape({
       timezone: PropTypes.string,
@@ -30,7 +31,6 @@ export class Date extends React.Component {
   };
 
   static defaultProps = {
-    loading: true,
     error: false,
   };
 
@@ -66,10 +66,7 @@ export class Date extends React.Component {
   };
 
   render() {
-    const { loading, error } = this.props;
-    if (loading) {
-      return <LoadingMessage />;
-    }
+    const { error } = this.props;
 
     if (error) {
       return <ErrorMessage />;
@@ -83,4 +80,7 @@ export class Date extends React.Component {
   }
 }
 
-export default withFragment({ location: getTimeZone })(Date);
+export default compose(
+  renderWhileLoading(LoadingMessage),
+  withFragment({ location: getTimeZone }),
+)(Date);
diff --git a/app/javascript/components/time-hero.jsx b/app/javascript/components/time-hero.jsx
index e6bf9899..eea81b5e 100644
--- a/app/javascript/components/time-hero.jsx
+++ b/app/javascript/components/time-hero.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import gql from 'graphql-tag';
 import Time from '@components/time';
+import { compose } from 'react-recompose';
 import { LoadingMessage, ErrorMessage } from '@messages/default-messages';
+import renderWhileLoading from '@hocs/render-while-loading';
 import withFragment from './hocs/with-fragment';
 
 export const getTimeHero = gql`
@@ -11,10 +13,7 @@ export const getTimeHero = gql`
   }
 `;
 
-export const TimeHero = ({ loading, error, location }) => {
-  if (loading) {
-    return <LoadingMessage />;
-  }
+export const TimeHero = ({ error, location }) => {
   if (error) {
     return <ErrorMessage />;
   }
@@ -23,14 +22,15 @@ export const TimeHero = ({ loading, error, location }) => {
 };
 
 TimeHero.propTypes = {
-  loading: PropTypes.bool,
   error: PropTypes.bool,
   location: PropTypes.shape({}).isRequired,
 };
 
 TimeHero.defaultProps = {
-  loading: true,
   error: false,
 };
 
-export default withFragment({ location: getTimeHero })(TimeHero);
+export default compose(
+  renderWhileLoading(LoadingMessage),
+  withFragment({ location: getTimeHero }),
+)(TimeHero);
diff --git a/app/javascript/components/wifi.jsx b/app/javascript/components/wifi.jsx
index e88c0cf3..528fcf17 100644
--- a/app/javascript/components/wifi.jsx
+++ b/app/javascript/components/wifi.jsx
@@ -2,11 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import gql from 'graphql-tag';
+import { compose } from 'react-recompose';
 import { WhiteSubTitle, WhiteTitleLarge } from '@components/typography';
 import { Row } from '@components/row';
 import { LoadingMessage, ErrorMessage } from '@messages/default-messages';
 import WifiIcon from '@assets/images/icons/icon-wifi.svg';
 import LockIcon from '@assets/images/icons/icon-key.svg';
+import renderWhileLoading from '@hocs/render-while-loading';
 import withFragment from './hocs/with-fragment';
 
 const Column = styled.div`
@@ -30,10 +32,7 @@ export const getWifi = gql`
   }
 `;
 
-export const Wifi = ({ loading, error, location }) => {
-  if (loading) {
-    return <LoadingMessage />;
-  }
+export const Wifi = ({ error, location }) => {
   if (error) {
     return <ErrorMessage />;
   }
@@ -70,13 +69,14 @@ Wifi.propTypes = {
     wifiName: PropTypes.string,
     wifiPassword: PropTypes.string,
   }).isRequired,
-  loading: PropTypes.bool,
   error: PropTypes.bool,
 };
 
 Wifi.defaultProps = {
-  loading: true,
   error: false,
 };
 
-export default withFragment({ location: getWifi })(Wifi);
+export default compose(
+  renderWhileLoading(LoadingMessage),
+  withFragment({ location: getWifi }),
+)(Wifi);