debounce

src/components/Facility/FacilityUsers.tsx

@@ -25,10 +25,10 @@ export default function FacilityUsers(props: { facilityId: number }) {
   });
   const [activeTab, setActiveTab] = useState(0);
   const { facilityId } = props;
-  const { data: userListData, isLoading } = useQuery({
+  const { data: userListData, isLoading: userListLoading } = useQuery({
     queryKey: ["facilityUsers", facilityId, qParams],
-    queryFn: query(routes.facility.getUsers, {
-      pathParams: { facility_id: facilityId },
+    queryFn: query.debounced(routes.facility.getUsers, {
+      pathParams: { facility_id: facilityId.toString() },
       queryParams: {
         username: qParams.username,
         limit: qParams.limit,
@@ -38,16 +38,24 @@ export default function FacilityUsers(props: { facilityId: number }) {
     enabled: !!facilityId,
   });
 
-  return (
-    <Page title={t("users")} hideBack breadcrumbs={false}>
-      <CountBlock
-        text={t("total_users")}
-        count={userListData?.count ?? 0}
-        loading={isLoading}
-        icon="d-people"
-        className="my-3 flex flex-col items-center sm:items-start"
-      />
-      {isLoading ? (
+  if (userListLoading) {
+    return (
+      <div className="px-6">
+        <Skeleton className="h-8 w-32 mb-4" />
+        <div className="flex items-center mb-4">
+          <Skeleton className="h-16 w-16 rounded-lg mr-3" />
+          <div>
+            <Skeleton className="h-4 w-14 mb-1" />
+            <Skeleton className="h-12 w-8" />
+          </div>
+        </div>
+        <div className="flex items-center justify-between mb-4">
+          <Skeleton className="h-10 w-72" />
+          <div className="flex space-x-2">
+            <Skeleton className="h-10 w-32" />
+            <Skeleton className="h-10 w-32" />
+          </div>
+        </div>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4">
           {Array.from({ length: 6 }).map((_, i) => (
             <Card key={i}>
@@ -62,28 +70,43 @@ export default function FacilityUsers(props: { facilityId: number }) {
                       </div>
                       <Skeleton className="h-6 w-16" />
                     </div>
+                    <div className="mt-2">
+                      <Skeleton className="h-4 w-20 mb-1" />
+                      <Skeleton className="h-4 w-12" />
+                    </div>
                   </div>
                 </div>
               </CardContent>
             </Card>
           ))}
         </div>
-      ) : (
-        <>
-          {!userListData ? (
-            <div>{t("no_users_found")}</div>
-          ) : (
-            <UserListView
-              users={userListData.results ?? []}
-              onSearch={(username) => updateQuery({ username })}
-              searchValue={qParams.username}
-              activeTab={activeTab}
-              onTabChange={setActiveTab}
-            />
-          )}
-        </>
-      )}
-      {userListData && <Pagination totalCount={userListData.count} />}
+      </div>
+    );
+  }
+
+  if (!userListData) {
+    return <div>{t("no_users_found")}</div>;
+  }
+
+  return (
+    <Page title={`${t("users")}`} hideBack={true} breadcrumbs={false}>
+      <CountBlock
+        text={t("total_users")}
+        count={userListData.count}
+        loading={userListLoading}
+        icon="d-people"
+        className="my-3 flex flex-col items-center sm:items-start"
+      />
+
+      <UserListView
+        users={userListData?.results ?? []}
+        onSearch={(username) => updateQuery({ username })}
+        searchValue={qParams.username}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+      />
+
+      <Pagination totalCount={userListData.count} />
     </Page>
   );
 }