diff --git a/src/CAREUI/misc/PaginatedList.tsx b/src/CAREUI/misc/PaginatedList.tsx index 61c67f97ae2..1487d69e4fa 100644 --- a/src/CAREUI/misc/PaginatedList.tsx +++ b/src/CAREUI/misc/PaginatedList.tsx @@ -130,7 +130,7 @@ interface ItemsProps<TItem> { const Items = <TItem extends object>(props: ItemsProps<TItem>) => { const { loading, items } = useContextualized<TItem>(); - if (loading) { + if (loading || items.length === 0) { return null; } diff --git a/src/Components/Facility/BedManagement.tsx b/src/Components/Facility/BedManagement.tsx index 68e9fade43d..d8799f1fbc5 100644 --- a/src/Components/Facility/BedManagement.tsx +++ b/src/Components/Facility/BedManagement.tsx @@ -182,24 +182,22 @@ export const BedManagement = (props: BedManagementProps) => { )); } else if (data?.results.length === 0) { BedList = ( - <p className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500"> + <p className="flex w-full justify-center bg-white p-5 text-center text-2xl font-bold text-gray-500"> No beds available in this location </p> ); } - if (data?.results.length) { - bed = ( - <> - <div className="mt-5 flex grow flex-wrap bg-white p-4">{BedList}</div> - {data.count && ( - <div className="mt-4 flex w-full justify-center"> - <Pagination totalCount={data.count} /> - </div> - )} - </> - ); - } + bed = ( + <> + <div className="mt-5 flex grow flex-wrap bg-white p-4">{BedList}</div> + {Boolean(data?.count && data.count > 0) && ( + <div className="mt-4 flex w-full justify-center"> + <Pagination totalCount={data?.count ?? 0} /> + </div> + )} + </> + ); if (loading) { return <Loading />; diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx index b7a758c5055..93a08794c82 100644 --- a/src/Components/Facility/LocationManagement.tsx +++ b/src/Components/Facility/LocationManagement.tsx @@ -46,14 +46,14 @@ export default function LocationManagement({ facilityId }: Props) { Add New Location </ButtonV2> </div> - <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500"> - <span>No locations available</span> - </PaginatedList.WhenEmpty> - - <PaginatedList.WhenLoading> - <Loading /> - </PaginatedList.WhenLoading> <div className="w-full @container"> + <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500"> + <span>No locations available</span> + </PaginatedList.WhenEmpty> + + <PaginatedList.WhenLoading> + <Loading /> + </PaginatedList.WhenLoading> <PaginatedList.Items<LocationModel> className="my-8 grid gap-3 @4xl:grid-cols-2 @6xl:grid-cols-3 @[100rem]:grid-cols-4 lg:mx-8"> {(item) => <Location {...item} />} </PaginatedList.Items>