.

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";
@@ -37,7 +38,6 @@ export default function FamilyManageTabs({
     },
   ];
   const [tab, setTab] = useState(tabs[0].name);
-  const [manageLoader, setManageLoader] = useState(false);
   const tabHandler = (value) => {
     setTab(value);
   };
@@ -61,7 +61,6 @@ export default function FamilyManageTabs({
   const apiCall = useMemo(() => new usersService(), []);
   // function for manage family
   const familyManageHandler = useCallback(async () => {
-    setManageLoader(true);
     try {
       let { family_uid } = accountDetails;
       let reqData = { family_uid };
@@ -69,7 +68,6 @@ export default function FamilyManageTabs({
       let { data } = await res;
       if (data?.internal_return < 0) return;
       setFamilyDetails(data);
-      setManageLoader(false);
     } catch (error) {
       setErrMsg("An error occurred");
       throw new Error(error);
@@ -93,11 +91,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 +135,17 @@ 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 />}
-                          </>
+                        {name === "Tasks" && (
+                          <FamilyTasks className={className} loader={loader} />
                         )}
+                        {name === "Account" && (
+                          <Account
+                            familyDetails={familyDetails}
+                            myRef={accountRef}
+                            handlePrint={useHandlePrint}
+                          />
+                        )}
+                        {name === "Profile" && <Profile />}
                       </div>
                     );
                   })}
@@ -162,7 +153,7 @@ export default function FamilyManageTabs({
               </div>
             </div>
           </div>
-        )}
+        </Suspense>
       </div>
     </div>
   );
@@ -241,12 +232,16 @@ const Account = forwardRef(({ familyDetails, myRef, handlePrint }) => {
             <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               Username:{" "}
               <span className="ml-2 normal-case">
-                {familyDetails?.username}
+                {familyDetails?.username
+                  ? familyDetails?.username
+                  : "please wait..."}
               </span>
             </h2>
             <h2 className="font-bold text-lg tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               Pin:{" "}
-              <span className="ml-2 normal-case">{familyDetails?.pin}</span>
+              <span className="ml-2 normal-case">
+                {familyDetails?.pin ? familyDetails?.pin : "please wait..."}
+              </span>
             </h2>
           </div>
 

src/components/MyTasks/MyOffersTable.jsx

@@ -51,9 +51,9 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
         // }
     };
 
-   if ( !MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0 ){
-       return(''); // want blank or no appear when no items
-   }
+//    if ( !MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0 ){
+//        return(''); // want blank or no appear when no items
+//    }
 
     return (
         <>

src/components/MyTasks/index.jsx

@@ -6,7 +6,11 @@ import CommonHead from "../UserHeader/CommonHead";
 import TopSellerTopBuyerSliderSection from "../Home/TopSellerTopBuyerSliderSection";
 import MyOffersTable from "./MyOffersTable";
 
-export default function MyTasks({MyActiveOffersList, ActiveJobList, commonHeadData}) {
+export default function MyTasks({
+  MyActiveOffersList,
+  ActiveJobList,
+  commonHeadData,
+}) {
   const [selectTab, setValue] = useState("today");
   const filterHandler = (value) => {
     setValue(value);
@@ -34,9 +38,13 @@ export default function MyTasks({MyActiveOffersList, ActiveJobList, commonHeadDa
               ></div>
             </div>
           </div>
-          <MyOffersTable
-              MyActiveOffersList={MyActiveOffersList}
-              className="mb-10" />
+          {MyActiveOffersList &&
+            MyActiveOffersList?.result_list?.length >= 0 && (
+              <MyOffersTable
+                MyActiveOffersList={MyActiveOffersList}
+                className="mb-10"
+              />
+            )}
           <MyJobTable ActiveJobList={ActiveJobList} />
         </div>
       </div>

src/components/Partials/Sidebar.jsx

@@ -12,7 +12,6 @@ export default function Sidebar({ sidebar, action, logoutModalHandler, myJobList
   const darkMode = useContext(DarkModeContext);
 
   let { userDetails } = useSelector((state) => state.userDetails);
-  console.log('user-details for job',userDetails);
   //const jobLists =  getJobList(); // pass from upper - we need in a lot of places
   let { jobLists } = useSelector((state) => state.jobLists);
   const marketData = jobLists?.result_list;

src/views/MyTaskPage.jsx

@@ -1,4 +1,4 @@
-import React, { useContext,useState, useEffect } from "react";
+import React, { useContext, useState, useEffect } from "react";
 import MyTasks from "../components/MyTasks";
 // import UsersService from "../services/UsersService";
 import usersService from "../services/UsersService";
@@ -6,46 +6,54 @@ import usersService from "../services/UsersService";
 import { useSelector } from "react-redux";
 
 export default function MyTaskPage() {
-    const {myTaskTable} = useSelector((state) => state.tableReload)
+  const { myTaskTable } = useSelector((state) => state.tableReload);
 
-    const [MyActiveJobList, setMyActiveJobList] = useState({loading: true, status:false, data:[]});
-    const [MyActiveOffersList, setMyActiveOffersList] = useState([]);
-    const api = new usersService();
-    const commonHeadData =()=>{
-        console.log("COMMON HEAD DATA ----------------=====---------------------");
+  const [MyActiveJobList, setMyActiveJobList] = useState({
+    loading: true,
+    status: false,
+    data: [],
+  });
+  const [MyActiveOffersList, setMyActiveOffersList] = useState([]);
+  const api = new usersService();
+  const commonHeadData = () => {
+    console.log("COMMON HEAD DATA ----------------=====---------------------");
     return 0;
+  };
+  const getMyActiveJobList = async () => {
+    setMyActiveJobList({ loading: true, status: false, data: [] });
+    try {
+      const res = await api.getMyActiveTaskList();
+      setMyActiveJobList({
+        loading: false,
+        status: true,
+        data: res.data.result_list,
+      });
+    } catch (error) {
+      setMyActiveJobList({ loading: false, status: false, data: [] });
+      console.log("Error getting tasks");
     }
-    const getMyActiveJobList = async () => {
-        setMyActiveJobList({loading: true, status:false, data:[]});
-        try {
-            const res = await api.getMyActiveTaskList();
-            setMyActiveJobList({loading: false, status:true, data:res.data.result_list});
-        } catch (error) {
-            setMyActiveJobList({loading: false, status:false, data:[]});
-            console.log("Error getting tasks");
-        }
-    };
-    const getMyActiveOffersList = async () => {
-        // setMyActiveOffersList({loading: true, status:false, data:[]});
-        try {
-            const res = await api.getOffersList();
-            setMyActiveOffersList(res.data);
-        } catch (error) {
-            // setMyActiveOffersList({loading: false, status:false, data:[]});
-            console.log("Error getting offers");
-        }
-    };
-    useEffect(() => {
-        getMyActiveJobList();
-        getMyActiveOffersList();
-    }, [myTaskTable]);
+  };
+  const getMyActiveOffersList = async () => {
+    // setMyActiveOffersList({loading: true, status:false, data:[]});
+    try {
+      const res = await api.getOffersList();
+      setMyActiveOffersList(res.data);
+    } catch (error) {
+      // setMyActiveOffersList({loading: false, status:false, data:[]});
+      console.log("Error getting offers");
+    }
+  };
+  useEffect(() => {
+    getMyActiveJobList();
+    getMyActiveOffersList();
+  }, [myTaskTable]);
 
-    //debugger;
-    return (
-        <>
-            <MyTasks ActiveJobList={MyActiveJobList}
-                     MyActiveOffersList={MyActiveOffersList}
-                     commonHeadData={commonHeadData}/>
-        </>
-    );
+  //debugger;
+  return (
+    <MyTasks
+      ActiveJobList={MyActiveJobList}
+      MyActiveOffersList={MyActiveOffersList}
+      commonHeadData={commonHeadData}
+    />
+  );
 }