diff --git a/src/components/ProfilePage.jsx b/src/components/ProfilePage.jsx
index d879975..8b76f64 100644
--- a/src/components/ProfilePage.jsx
+++ b/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),
diff --git a/src/components/ProfilePage/PageLoading.jsx b/src/components/ProfilePage/PageLoading.jsx
new file mode 100644
index 0000000..0be951d
--- /dev/null
+++ b/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;
diff --git a/src/components/ProfilePage/elements/Banner.jsx b/src/components/ProfilePage/elements/Banner.jsx
new file mode 100644
index 0000000..432ac8f
--- /dev/null
+++ b/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;
diff --git a/src/index.scss b/src/index.scss
index 7e1b217..f04961f 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -37,17 +37,15 @@ $fa-font-path: "~font-awesome/fonts";
   }
 }
 
+.profile-page-bg-banner {
+  height: 12rem;
+  background-image: url('../assets/dot-pattern-light.png');
+  background-repeat: repeat-x;
+  background-size: auto 85%;
+}
+
 .profile-page {
-  .bg-banner {
-    height: 12rem;
-    background-image: url('../assets/dot-pattern-light.png');
-    background-repeat: repeat-x;
-    background-size: auto 85%;
-  }
-
-
   .profile-avatar-wrap {
-
     @include media-breakpoint-up(md) {
       max-width: 12rem;
       margin-right: 0;
diff --git a/src/reducers/ProfilePageReducer.js b/src/reducers/ProfilePageReducer.js
index 640ef12..c45a046 100644
--- a/src/reducers/ProfilePageReducer.js
+++ b/src/reducers/ProfilePageReducer.js
@@ -20,16 +20,23 @@ export const initialState = {
   preferences: {},
   courseCertificates: [],
   drafts: {},
+  isLoadingProfile: true,
 };
 
 const profilePage = (state = initialState, action) => {
   switch (action.type) {
+    case FETCH_PROFILE.BEGIN:
+      return {
+        ...state,
+        isLoadingProfile: true,
+      };
     case FETCH_PROFILE.SUCCESS:
       return {
         ...state,
         account: action.account,
         preferences: action.preferences,
         courseCertificates: action.courseCertificates,
+        isLoadingProfile: false,
       };
     case SAVE_PROFILE.BEGIN:
       return {
diff --git a/src/selectors/ProfilePageSelector.js b/src/selectors/ProfilePageSelector.js
index edf46c7..dd4d545 100644
--- a/src/selectors/ProfilePageSelector.js
+++ b/src/selectors/ProfilePageSelector.js
@@ -11,6 +11,7 @@ export const profileAccountDraftsSelector = state => state.profilePage.accountDr
 export const profileVisibilityDraftsSelector = state => state.profilePage.visibilityDrafts;
 export const saveStateSelector = state => state.profilePage.saveState;
 export const savePhotoStateSelector = state => state.profilePage.savePhotoState;
+export const isLoadingProfileSelector = state => state.profilePage.isLoadingProfile;
 export const currentlyEditingFieldSelector = state => state.profilePage.currentlyEditingField;
 export const accountErrorsSelector = state => state.profilePage.errors;
 
@@ -264,6 +265,7 @@ export const profilePageSelector = createSelector(
   profileImageSelector,
   saveStateSelector,
   savePhotoStateSelector,
+  isLoadingProfileSelector,
   isCurrentUserProfileSelector,
   draftSocialLinksByPlatformSelector,
   accountErrorsSelector,
@@ -273,6 +275,7 @@ export const profilePageSelector = createSelector(
     profileImage,
     saveState,
     savePhotoState,
+    isLoadingProfile,
     isCurrentUserProfile,
     draftSocialLinksByPlatform,
     errors,
@@ -315,6 +318,7 @@ export const profilePageSelector = createSelector(
     // Other data we need
     saveState,
     savePhotoState,
+    isLoadingProfile,
     isCurrentUserProfile,
     photoUploadError: errors.photo || null,
   }),