Remove render block on fetchUserAccount.

src/components/App.jsx

@@ -22,7 +22,7 @@ import {
 } from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { PageLoading, fetchUserAccount } from '../common';
+import { fetchUserAccount } from '../common';
 import { ConnectedProfilePage } from '../profile';
 
 import FooterLogo from '../assets/edx-footer.png';
@@ -34,16 +34,11 @@ import messages from './App.messages';
 
 
 function PageContent({
-  ready,
   configuration,
   username,
   avatar,
   intl,
 }) {
-  if (!ready) {
-    return <PageLoading srMessage={intl.formatMessage(messages['app.loading.message'])} />;
-  }
-
   const mainMenu = [
     {
       type: 'item',
@@ -184,7 +179,6 @@ function PageContent({
 PageContent.propTypes = {
   username: PropTypes.string.isRequired,
   avatar: PropTypes.string,
-  ready: PropTypes.bool,
   configuration: PropTypes.shape({
     SITE_NAME: PropTypes.string.isRequired,
     MARKETING_SITE_BASE_URL: PropTypes.string.isRequired,
@@ -205,7 +199,6 @@ PageContent.propTypes = {
 };
 
 PageContent.defaultProps = {
-  ready: false,
   avatar: null,
 };
 
@@ -223,7 +216,6 @@ class App extends Component {
         <Provider store={this.props.store}>
           <ConnectedRouter history={this.props.history}>
             <IntlPageContent
-              ready={this.props.ready}
               configuration={this.props.configuration}
               username={this.props.username}
               avatar={this.props.avatar}
@@ -241,7 +233,6 @@ App.propTypes = {
   avatar: PropTypes.string,
   store: PropTypes.object.isRequired, // eslint-disable-line
   history: PropTypes.object.isRequired, // eslint-disable-line
-  ready: PropTypes.bool,
   configuration: PropTypes.shape({
     SITE_NAME: PropTypes.string.isRequired,
     MARKETING_SITE_BASE_URL: PropTypes.string.isRequired,
@@ -261,15 +252,11 @@ App.propTypes = {
 };
 
 App.defaultProps = {
-  ready: false,
   avatar: null,
 };
 
 const mapStateToProps = state => ({
   username: state.authentication.username,
-  // An error means that we tried to load the user account and failed,
-  // which also means we're ready to display something.
-  ready: state.userAccount.loaded || state.userAccount.error != null,
   configuration: state.configuration,
   avatar: state.userAccount.profileImage.hasImage
     ? state.userAccount.profileImage.imageUrlMedium

src/profile/sagas.js

@@ -52,7 +52,7 @@ export function* handleFetchProfile(action) {
 
     // Depending on which profile we're loading, we need to make different calls.
     const calls = [
-      // We'll always make a call for certificates.
+      call(ProfileApiService.getAccount, username),
       call(ProfileApiService.getCourseCertificates, username),
     ];
 
@@ -60,19 +60,15 @@ export function* handleFetchProfile(action) {
       // If the profile is for the current user, get their preferences.
       // We don't need them for other users.
       calls.push(call(ProfileApiService.getPreferences, username));
-    } else {
-      // If the profile is not for the current user, get that user's account data
-      // since we don't already have it.
-      calls.push(call(ProfileApiService.getAccount, username));
     }
 
     // Make all the calls in parallel.
     const result = yield all(calls);
 
     if (username === authenticationUsername) {
-      [courseCertificates, preferences] = result;
+      [account, courseCertificates, preferences] = result;
     } else {
-      [courseCertificates, account] = result;
+      [account, courseCertificates] = result;
     }
     yield put(fetchProfileSuccess(account, preferences, courseCertificates));
 

src/profile/sagas.test.js

@@ -60,16 +60,17 @@ describe('RootSaga', () => {
       const action = profileActions.fetchProfile('gonzo');
       const gen = handleFetchProfile(action);
 
-      const result = [[1, 2, 3], { preferences: 'stuff' }];
+      const result = [userAccount, [1, 2, 3], { preferences: 'stuff' }];
 
       expect(gen.next().value).toEqual(select(handleFetchProfileSelector));
       expect(gen.next(selectorData).value).toEqual(put(profileActions.fetchProfileBegin()));
       expect(gen.next().value).toEqual(all([
+        call(ProfileApiService.getAccount, 'gonzo'),
         call(ProfileApiService.getCourseCertificates, 'gonzo'),
         call(ProfileApiService.getPreferences, 'gonzo'),
       ]));
       expect(gen.next(result).value)
-        .toEqual(put(profileActions.fetchProfileSuccess(userAccount, result[1], result[0])));
+        .toEqual(put(profileActions.fetchProfileSuccess(userAccount, result[2], result[1])));
       expect(gen.next().value).toEqual(put(profileActions.fetchProfileReset()));
       expect(gen.next().value).toBeUndefined();
     });
@@ -87,16 +88,16 @@ describe('RootSaga', () => {
       const action = profileActions.fetchProfile('booyah');
       const gen = handleFetchProfile(action);
 
-      const result = [[1, 2, 3], { preferences: 'stuff' }];
+      const result = [{}, [1, 2, 3]];
 
       expect(gen.next().value).toEqual(select(handleFetchProfileSelector));
       expect(gen.next(selectorData).value).toEqual(put(profileActions.fetchProfileBegin()));
       expect(gen.next().value).toEqual(all([
-        call(ProfileApiService.getCourseCertificates, 'booyah'),
         call(ProfileApiService.getAccount, 'booyah'),
+        call(ProfileApiService.getCourseCertificates, 'booyah'),
       ]));
       expect(gen.next(result).value)
-        .toEqual(put(profileActions.fetchProfileSuccess(result[1], {}, result[0])));
+        .toEqual(put(profileActions.fetchProfileSuccess(result[0], {}, result[1])));
       expect(gen.next().value).toEqual(put(profileActions.fetchProfileReset()));
       expect(gen.next().value).toBeUndefined();
     });