revert(client): add react suspense and lazy loading (#50529)

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) ? (
-    <Suspense fallback={<Loader fullScreen={true} />}>
+    showLoading ? (
+      <Loader fullScreen={true} />
+    ) : (
       <FourOhFour />
-    </Suspense>
+    )
   ) : (
-    <Suspense fallback={<Loader fullScreen={true} />}>
-      <Profile isSessionUser={isSessionUser} user={requestedUser} />
-    </Suspense>
+    <Profile isSessionUser={isSessionUser} user={requestedUser} />
   );
 }