Corrected the skeleton loading logic

ohcnetwork · Nov 23, 2024 · 9401a8c · 9401a8c
1 parent 59c58da
commit 9401a8c
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 19 deletions.
diff --git a/src/CAREUI/display/Count.tsx b/src/CAREUI/display/Count.tsx
@@ -3,7 +3,7 @@ import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 import { classNames } from "@/Utils/utils";
 
 interface Props {
-  count: number | null;
+  count: number;
   text: string;
   loading: boolean;
   icon: IconName;
@@ -21,7 +21,7 @@ export default function CountBlock(props: Props) {
           <dt className="mb-1 truncate text-sm font-semibold text-secondary-700">
             {props.text}
           </dt>
-          {props.loading || props.count == null ? (
+          {props.loading ? (
             <dd className="h-10 w-full max-w-[100px] animate-pulse rounded-lg bg-secondary-300" />
           ) : (
             <dd id="count" className="text-5xl font-black leading-9">

diff --git a/src/components/Assets/AssetsList.tsx b/src/components/Assets/AssetsList.tsx
@@ -45,7 +45,7 @@ const AssetsList = () => {
   const [assets, setAssets] = useState([{} as AssetData]);
   const [isLoading, setIsLoading] = useState(false);
   const [isScannerActive, setIsScannerActive] = useState(false);
-  const [totalCount, setTotalCount] = useState<number | null>(null);
+  const [totalCount, setTotalCount] = useState(0);
   const [facility, setFacility] = useState<FacilityModel>();
   const [status, setStatus] = useState<string>();
   const [asset_class, setAssetClass] = useState<string>();
@@ -75,7 +75,7 @@ const AssetsList = () => {
     onResponse: ({ res, data }) => {
       if (res?.status === 200 && data) {
         setAssets(data.results);
-        setTotalCount(data?.count);
+        setTotalCount(data.count);
       }
     },
   });
@@ -370,8 +370,8 @@ const AssetsList = () => {
       <div className="mt-5 gap-3 space-y-2 lg:flex">
         <CountBlock
           text="Total Assets"
-          count={totalCount ? totalCount : null}
-          loading={loading}
+          count={totalCount}
+          loading={loading || !totalCount}
           icon="l-monitor-heart-rate"
           className="flex-1"
         />

diff --git a/src/components/Facility/DischargedPatientsList.tsx b/src/components/Facility/DischargedPatientsList.tsx
@@ -214,7 +214,7 @@ const DischargedPatientsList = ({
   const [emergency_phone_number, setEmergencyPhoneNumber] = useState("");
   const [emergencyPhoneNumberError, setEmergencyPhoneNumberError] =
     useState("");
-  const [count, setCount] = useState<number | null>(null);
+  const [count, setCount] = useState(0);
 
   const setPhoneNum = (phone_number: string) => {
     setPhoneNumber(phone_number);
@@ -286,8 +286,8 @@ const DischargedPatientsList = ({
           <div className="flex-1">
             <CountBlock
               text="Discharged Patients"
-              count={count ? count : null}
-              loading={facilityQuery.loading || count == null}
+              count={count}
+              loading={facilityQuery.loading || !count}
               icon="l-user-injured"
               className="pb-12"
             />

diff --git a/src/components/Facility/FacilityList.tsx b/src/components/Facility/FacilityList.tsx
@@ -182,8 +182,8 @@ export const FacilityList = () => {
       <div className="mt-4 gap-2 lg:flex">
         <CountBlock
           text="Total Facilities"
-          count={permittedData ? permittedData.count : null}
-          loading={isLoading}
+          count={permittedData ? permittedData.count : 0}
+          loading={isLoading || !permittedData}
           icon="l-hospital"
           className="flex-1"
         />

diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx
@@ -276,8 +276,8 @@ export default function FacilityUsers(props: any) {
         {facilityUserData && (
           <CountBlock
             text={t("total_users")}
-            count={facilityData ? facilityUserData?.count : null}
-            loading={isLoading}
+            count={facilityUserData.count}
+            loading={isLoading || !facilityUserData}
             icon="l-user-injured"
             className="flex-1"
           />

diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
@@ -978,8 +978,8 @@ export const PatientManager = () => {
           <div className="flex-1" id="total-patientcount">
             <CountBlock
               text="Total Patients"
-              count={data ? data.count : null}
-              loading={isLoading}
+              count={data?.count || 0}
+              loading={isLoading || !data}
               icon="l-user-injured"
               className="pb-12"
             />

diff --git a/src/components/Patient/SampleViewAdmin.tsx b/src/components/Patient/SampleViewAdmin.tsx
@@ -344,8 +344,8 @@ export default function SampleViewAdmin() {
           <div className="w-full">
             <CountBlock
               text="Total Samples Taken"
-              count={sampeleData ? sampeleData.count : null}
-              loading={isLoading}
+              count={sampeleData?.count || 0}
+              loading={isLoading || !sampeleData}
               icon="l-thermometer"
               className="flex-1"
             />

diff --git a/src/components/Users/ManageUsers.tsx b/src/components/Users/ManageUsers.tsx
@@ -552,8 +552,10 @@ export default function ManageUsers() {
       <div className="mt-5 grid grid-cols-1 sm:grid-cols-3 md:gap-5">
         <CountBlock
           text="Total Users"
-          count={userListData ? userListData.count : null}
-          loading={userListLoading || districtDataLoading}
+          count={userListData?.count || 0}
+          loading={
+            userListLoading || districtDataLoading || !userListData?.results
+          }
           icon="l-user-injured"
           className="flex-1"
         />