From 49948076df2b00a9f32d95dad71557c1fad391c5 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Sat, 27 May 2023 04:09:00 +0300
Subject: [PATCH] revert(client): add react suspense and lazy loading (#50529)

---
 .../show-profile-or-four-oh-four.tsx          | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

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) ? (
-    <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} />
   );
 }