fix: add an app loading state (#80)

* fix: add isLoadingProfile to app state

* fix: add loading spinner

src/components/ProfilePage.jsx

@@ -26,6 +26,8 @@ import Bio from './ProfilePage/Bio';
 import Certificates from './ProfilePage/Certificates';
 import AgeMessage from './ProfilePage/AgeMessage';
 import DateJoined from './ProfilePage/DateJoined';
+import PageLoading from './ProfilePage/PageLoading';
+import Banner from './ProfilePage/elements/Banner';
 import { profilePageSelector } from '../selectors/ProfilePageSelector';
 
 export class ProfilePage extends React.Component {
@@ -93,8 +95,11 @@ export class ProfilePage extends React.Component {
       visibilityBio,
       requiresParentalConsent,
       isCurrentUserProfile,
+      isLoadingProfile,
     } = this.props;
 
+    if (isLoadingProfile) return <PageLoading />;
+
     const commonFormProps = {
       openHandler: this.handleOpen,
       closeHandler: this.handleClose,
@@ -126,7 +131,7 @@ export class ProfilePage extends React.Component {
 
     return (
       <div className="profile-page">
-        <div className="bg-banner bg-program-micro-masters d-none d-md-block p-relative" />
+        <Banner />
         <Container fluid>
           <Row className="align-items-center pt-4 mb-4 pt-md-0 mb-md-0">
             <Col xs="auto" md={4} lg={3}>
@@ -260,6 +265,7 @@ ProfilePage.propTypes = {
   }),
   saveState: PropTypes.oneOf([null, 'pending', 'complete', 'error']),
   savePhotoState: PropTypes.oneOf([null, 'pending', 'complete', 'error']),
+  isLoadingProfile: PropTypes.bool.isRequired,
 
   // Page state helpers
   photoUploadError: PropTypes.objectOf(PropTypes.string),

src/components/ProfilePage/PageLoading.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Spinner } from 'reactstrap';
+
+import Banner from './elements/Banner';
+
+function PageLoading() {
+  return (
+    <div>
+      <Banner />
+      <div
+        className="d-flex justify-content-center align-items-center flex-column"
+        style={{
+          height: '50vh',
+        }}
+      >
+        <Spinner color="primary" />
+      </div>
+    </div>
+  );
+}
+
+export default PageLoading;

src/components/ProfilePage/elements/Banner.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function Banner() {
+  return <div className="profile-page-bg-banner bg-program-micro-masters d-none d-md-block p-relative" />;
+}
+
+export default Banner;