WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

added suspense to familymanagetabs

Browse Source
This commit is contained in:
Ebube
2023-05-31 09:39:54 +01:00
parent 759269cd74
commit ced9c523ad
1 changed files with 29 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/FamilyManageTabs.jsx
+29 -26
View File
@@ -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>
);