From ced9c523ad0c0d863945d54224eff17a5fb77f51 Mon Sep 17 00:00:00 2001
From: Ebube <chukwumdiebubeojinta@gmail.com>
Date: Wed, 31 May 2023 09:39:54 +0100
Subject: [PATCH] added suspense to familymanagetabs

---
 src/components/FamilyAcc/FamilyManageTabs.jsx | 55 ++++++++++---------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/src/components/FamilyAcc/FamilyManageTabs.jsx b/src/components/FamilyAcc/FamilyManageTabs.jsx
index 5f13fc3..5cff007 100644
--- a/src/components/FamilyAcc/FamilyManageTabs.jsx
+++ b/src/components/FamilyAcc/FamilyManageTabs.jsx
@@ -5,6 +5,7 @@ import React, {
   useRef,
   useState,
   forwardRef,
+  Suspense,
 } from "react";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import profile from "../../assets/images/profile-info-profile.png";
@@ -93,11 +94,13 @@ export default function FamilyManageTabs({
       }`}
     >
       <div className="relative w-full overflow-x-auto sm:rounded-lg">
-        {loader ? (
-          <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
-            <LoadingSpinner size="16" color="sky-blue" />
-          </div>
-        ) : (
+        <Suspense
+          fallback={
+            <div className="h-full min-h-[500px] w-full overflow-hidden flex justify-center items-center">
+              <LoadingSpinner size="16" color="sky-blue" />
+            </div>
+          }
+        >
           <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-4 min-h-[520px]">
             <div className="border-r border-[#E3E4FE] dark:border-[#a7a9b533] p-6 h-full">
               <ProfileInfo
@@ -135,26 +138,26 @@ export default function FamilyManageTabs({
                         } h-full p-4 border border-[#dbd9d9]`}
                         key={id}
                       >
-                        {manageLoader ? (
-                          <LoadingSpinner size="8" color="sky-blue" />
-                        ) : (
-                          <>
-                            {name === "Tasks" && (
-                              <FamilyTasks
-                                className={className}
-                                loader={loader}
-                              />
-                            )}
-                            {name === "Account" && (
-                              <Account
-                                familyDetails={familyDetails}
-                                myRef={accountRef}
-                                handlePrint={useHandlePrint}
-                              />
-                            )}
-                            {name === "Profile" && <Profile />}
-                          </>
-                        )}
+                        <Suspense
+                          fallback={
+                            <LoadingSpinner size="8" color="sky-blue" />
+                          }
+                        >
+                          {name === "Tasks" && (
+                            <FamilyTasks
+                              className={className}
+                              loader={loader}
+                            />
+                          )}
+                          {name === "Account" && (
+                            <Account
+                              familyDetails={familyDetails}
+                              myRef={accountRef}
+                              handlePrint={useHandlePrint}
+                            />
+                          )}
+                          {name === "Profile" && <Profile />}
+                        </Suspense>
                       </div>
                     );
                   })}
@@ -162,7 +165,7 @@ export default function FamilyManageTabs({
               </div>
             </div>
           </div>
-        )}
+        </Suspense>
       </div>
     </div>
   );