Added skeleton loader during advanced filters

src/CAREUI/display/Count.tsx

@@ -2,7 +2,7 @@ import { classNames } from "../../Utils/utils";
 import CareIcon, { IconName } from "../icons/CareIcon";
 
 interface Props {
-  count: number;
+  count: number | null;
   text: string;
   loading: boolean;
   icon: IconName;
@@ -20,7 +20,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.loading || props.count == null ? (
             <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">

src/components/Assets/AssetsList.tsx

@@ -41,7 +41,7 @@ const AssetsList = () => {
   const [assets, setAssets] = useState([{} as AssetData]);
   const [isLoading, setIsLoading] = useState(false);
   const [isScannerActive, setIsScannerActive] = useState(false);
-  const [totalCount, setTotalCount] = useState(0);
+  const [totalCount, setTotalCount] = useState<number | null>(null);
   const [facility, setFacility] = useState<FacilityModel>();
   const [status, setStatus] = useState<string>();
   const [asset_class, setAssetClass] = useState<string>();
@@ -71,7 +71,7 @@ const AssetsList = () => {
     onResponse: ({ res, data }) => {
       if (res?.status === 200 && data) {
         setAssets(data.results);
-        setTotalCount(data.count);
+        setTotalCount(data?.count);
       }
     },
   });
@@ -359,7 +359,7 @@ const AssetsList = () => {
       <div className="mt-5 gap-3 space-y-2 lg:flex">
         <CountBlock
           text="Total Assets"
-          count={totalCount}
+          count={loading || totalCount === undefined ? null : totalCount}
           loading={loading}
           icon="l-monitor-heart-rate"
           className="flex-1"
@@ -443,7 +443,7 @@ const AssetsList = () => {
           <div className="grow">
             <div className="py-8 md:px-5">
               {manageAssets}
-              <Pagination totalCount={totalCount} />
+              {totalCount !== null && <Pagination totalCount={totalCount} />}
             </div>
           </div>
         </>

src/components/Facility/DischargedPatientsList.tsx

@@ -281,7 +281,9 @@ const DischargedPatientsList = ({
           <div className="flex-1">
             <CountBlock
               text="Discharged Patients"
-              count={count}
+              count={
+                facilityQuery.loading || count === undefined ? null : count
+              }
               loading={facilityQuery.loading}
               icon="l-user-injured"
               className="pb-12"

src/components/Facility/FacilityList.tsx

@@ -178,7 +178,11 @@ export const FacilityList = () => {
       <div className="mt-4 gap-2 lg:flex">
         <CountBlock
           text="Total Facilities"
-          count={permittedData ? permittedData.count : 0}
+          count={
+            isLoading || permittedData?.count === undefined
+              ? null
+              : permittedData.count
+          }
           loading={isLoading}
           icon="l-hospital"
           className="flex-1"

src/components/Facility/FacilityUsers.tsx

@@ -272,7 +272,11 @@ export default function FacilityUsers(props: any) {
         {facilityUserData && (
           <CountBlock
             text={t("total_users")}
-            count={facilityUserData.count}
+            count={
+              isLoading || facilityUserData?.count === undefined
+                ? null
+                : facilityUserData.count
+            }
             loading={isLoading}
             icon="l-user-injured"
             className="flex-1"

src/components/Patient/ManagePatients.tsx

@@ -974,7 +974,9 @@ export const PatientManager = () => {
           <div className="flex-1" id="total-patientcount">
             <CountBlock
               text="Total Patients"
-              count={data?.count || 0}
+              count={
+                isLoading || data?.count === undefined ? null : data?.count
+              }
               loading={isLoading}
               icon="l-user-injured"
               className="pb-12"

src/components/Patient/SampleViewAdmin.tsx

@@ -335,7 +335,11 @@ export default function SampleViewAdmin() {
           <div className="w-full">
             <CountBlock
               text="Total Samples Taken"
-              count={sampeleData?.count || 0}
+              count={
+                isLoading || sampeleData?.count === undefined
+                  ? null
+                  : sampeleData.count
+              }
               loading={isLoading}
               icon="l-thermometer"
               className="flex-1"

src/components/Users/ManageUsers.tsx

@@ -544,7 +544,13 @@ 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?.count || 0}
+          count={
+            userListLoading ||
+            districtDataLoading ||
+            userListData?.count === undefined
+              ? null
+              : userListData.count
+          }
           loading={userListLoading || districtDataLoading}
           icon="l-user-injured"
           className="flex-1"