diff --git a/client/src/client-only-routes/show-profile-or-four-oh-four.tsx b/client/src/client-only-routes/show-profile-or-four-oh-four.tsx
index 03f40621e16..304314db273 100644
--- a/client/src/client-only-routes/show-profile-or-four-oh-four.tsx
+++ b/client/src/client-only-routes/show-profile-or-four-oh-four.tsx
@@ -1,8 +1,9 @@
import { isEmpty } from 'lodash-es';
-import React, { useEffect, Suspense, lazy } from 'react';
+import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { isBrowser } from '../../utils/index';
+import FourOhFour from '../components/FourOhFour';
import Loader from '../components/helpers/loader';
import Profile from '../components/profile/profile';
import { fetchProfileForUser } from '../redux/actions';
@@ -13,8 +14,6 @@ import {
} from '../redux/selectors';
import { User } from '../redux/prop-types';
-const FourOhFour = lazy(() => import('../components/FourOhFour'));
-
interface ShowProfileOrFourOhFourProps {
fetchProfileForUser: (username: string) => void;
fetchState: {
@@ -25,6 +24,7 @@ interface ShowProfileOrFourOhFourProps {
isSessionUser: boolean;
maybeUser?: string;
requestedUser: User;
+ showLoading: boolean;
}
const createRequestedUserSelector =
@@ -46,6 +46,7 @@ const makeMapStateToProps =
return {
requestedUser: requestedUserSelector(state, props),
isSessionUser: isSessionUserSelector(state, props),
+ showLoading: fetchState.pending,
fetchState
};
};
@@ -60,7 +61,8 @@ function ShowProfileOrFourOhFour({
requestedUser,
maybeUser,
fetchProfileForUser,
- isSessionUser
+ isSessionUser,
+ showLoading
}: ShowProfileOrFourOhFourProps) {
useEffect(() => {
// If the user is not already in the store, fetch it
@@ -77,13 +79,13 @@ function ShowProfileOrFourOhFour({
}
return isEmpty(requestedUser) ? (
- }>
+ showLoading ? (
+
+ ) : (
-
+ )
) : (
- }>
-
-
+
);
}