Optimise profile page loading

- Remove loading screen to avoid flashing between server rendered
   html and the client rendered html with a weird loading screen in
   between the similar views

 - Avoid emptying user listing refs if they are already fetched for
   the user

src/containers/ProfilePage/ProfilePage.css

@@ -1,6 +1,5 @@
 @import '../../marketplace.css';
 
-.loading,
 .error {
   margin-top: 5px;
 

src/containers/ProfilePage/ProfilePage.duck.js

@@ -16,26 +16,30 @@ export const QUERY_LISTINGS_ERROR = 'app/ProfilePage/QUERY_LISTINGS_ERROR';
 
 const initialState = {
   userId: null,
-
-  userShowInProgress: false,
-  userShowError: null,
-
-  queryListingsError: null,
   userListingRefs: [],
+  userShowError: null,
+  queryListingsError: null,
 };
 
 export default function profilePageReducer(state = initialState, action = {}) {
   const { type, payload } = action;
   switch (type) {
     case SHOW_USER_REQUEST:
-      return { ...state, userShowInProgress: true, userShowError: null, userId: payload.userId };
+      return { ...state, userShowError: null, userId: payload.userId };
     case SHOW_USER_SUCCESS:
-      return { ...state, userShowInProgress: false };
+      return state;
     case SHOW_USER_ERROR:
-      return { ...state, userShowInProgress: false, userShowError: payload };
+      return { ...state, userShowError: payload };
 
     case QUERY_LISTINGS_REQUEST:
-      return { ...state, userListingRefs: [], queryListingsError: null };
+      return {
+        ...state,
+
+        // Empty listings only when user id changes
+        userListingRefs: payload.userId === state.userId ? state.userListingRefs : [],
+
+        queryListingsError: null,
+      };
     case QUERY_LISTINGS_SUCCESS:
       return { ...state, userListingRefs: payload.listingRefs };
     case QUERY_LISTINGS_ERROR:
@@ -63,8 +67,9 @@ export const showUserError = e => ({
   payload: e,
 });
 
-export const queryListingsRequest = () => ({
+export const queryListingsRequest = userId => ({
   type: QUERY_LISTINGS_REQUEST,
+  payload: { userId },
 });
 
 export const queryListingsSuccess = listingRefs => ({
@@ -81,7 +86,7 @@ export const queryListingsError = e => ({
 // ================ Thunks ================ //
 
 export const queryUserListings = userId => (dispatch, getState, sdk) => {
-  dispatch(queryListingsRequest());
+  dispatch(queryListingsRequest(userId));
   return sdk.listings
     .query({ author_id: userId, include: ['images'] })
     .then(response => {

src/containers/ProfilePage/ProfilePage.js

@@ -35,7 +35,6 @@ export const ProfilePageComponent = props => {
     scrollingDisabled,
     currentUser,
     user,
-    userShowInProgress,
     userShowError,
     queryListingsError,
     listings,
@@ -109,12 +108,6 @@ export const ProfilePageComponent = props => {
         <FormattedMessage id="ProfilePage.loadingDataFailed" />
       </p>
     );
-  } else if (userShowInProgress) {
-    content = (
-      <p className={css.loading}>
-        <FormattedMessage id="ProfilePage.loadingData" />
-      </p>
-    );
   } else {
     content = mainContent;
   }
@@ -169,7 +162,6 @@ ProfilePageComponent.propTypes = {
   scrollingDisabled: bool.isRequired,
   currentUser: propTypes.currentUser,
   user: propTypes.user,
-  userShowInProgress: bool.isRequired,
   userShowError: propTypes.error,
   queryListingsError: propTypes.error,
   listings: arrayOf(propTypes.listing).isRequired,
@@ -182,13 +174,7 @@ const mapStateToProps = state => {
   // Page needs logoutError
   const { logoutError } = state.Auth;
   const { currentUser } = state.user;
-  const {
-    userId,
-    userShowInProgress,
-    userShowError,
-    queryListingsError,
-    userListingRefs,
-  } = state.ProfilePage;
+  const { userId, userShowError, queryListingsError, userListingRefs } = state.ProfilePage;
   const userMatches = getMarketplaceEntities(state, [{ type: 'user', id: userId }]);
   const user = userMatches.length === 1 ? userMatches[0] : null;
   const listings = getMarketplaceEntities(state, userListingRefs);
@@ -197,7 +183,6 @@ const mapStateToProps = state => {
     scrollingDisabled: isScrollingDisabled(state),
     currentUser,
     user,
-    userShowInProgress,
     userShowError,
     queryListingsError,
     listings,

src/translations/en.json

@@ -391,7 +391,6 @@
   "ProfilePage.editProfileLinkDesktop": "Edit profile",
   "ProfilePage.editProfileLinkMobile": "Edit",
   "ProfilePage.listingsTitle": "My saunas ({count})",
-  "ProfilePage.loadingData": "Loading user data…",
   "ProfilePage.loadingDataFailed": "Whoopsie, something went wrong - please try again.",
   "ProfilePage.mobileHeading": "{name}",
   "ProfilePage.schemaTitle": "{name} | {siteTitle}",