feat: vitual lazy load on combobox

src/app/(modules)/users/components/UserSheet.tsx

@@ -1,20 +1,14 @@
 'use client';
 
-import { useMemo, useRef, type ComponentProps } from 'react';
+import { useRef, type ComponentProps } from 'react';
+
 import type { UseFormRegister } from 'react-hook-form';
+
 import { Loader2 } from 'lucide-react';
 
+import { RoleCombobox } from '@/components/lookups/RoleCombobox';
 import { Button } from '@/components/ui/button';
-import {
-  Combobox,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-  ComboboxTrigger,
-  ComboboxValue,
-} from '@/components/ui/combobox';
+
 import {
   Dialog,
   DialogContent,
@@ -23,67 +17,64 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import type { Role } from '@/types';
-import type { UserFormValues } from '../hooks/useUserForm';
 
-type RoleComboboxItem = {
-  value: string;
-  label: string;
-};
+import { Input } from '@/components/ui/input';
+
+import { Label } from '@/components/ui/label';
+
+import type { UserFormValues } from '../hooks/useUserForm';
 
 interface UserSheetProps {
   open: boolean;
+
   onOpenChange: (open: boolean) => void;
+
   userId?: number;
+
   register: UseFormRegister<UserFormValues>;
+
   onSubmit: ComponentProps<'form'>['onSubmit'];
+
   roleId: string;
+
   onRoleChange: (roleId: string) => void;
-  roles: Role[];
-  isRolesLoading: boolean;
+
   isSaving: boolean;
 }
 
 export function UserSheet({
   open,
+
   onOpenChange,
+
   userId,
+
   register,
+
   onSubmit,
+
   roleId,
+
   onRoleChange,
-  roles,
-  isRolesLoading,
+
   isSaving,
 }: UserSheetProps) {
   const roleComboboxPortalRef = useRef<HTMLDivElement | null>(null);
-  const roleItems = useMemo<RoleComboboxItem[]>(
-    () =>
-      roles.map((role) => ({
-        value: String(role.id),
-        label: role.display_name || role.name,
-      })),
-    [roles],
-  );
-
-  const selectedRole = useMemo(
-    () => roleItems.find((item) => item.value === roleId) ?? null,
-    [roleItems, roleId],
-  );
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-xl">
         <DialogHeader>
           <DialogTitle>{userId ? 'Edit User' : 'Create User'}</DialogTitle>
+
           <DialogDescription>Assign user details and a role.</DialogDescription>
         </DialogHeader>
+
         <form onSubmit={onSubmit} className="flex flex-1 flex-col gap-5 px-4">
           <div className="grid gap-4 md:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="first-name">First Name</Label>
+
               <Input
                 id="first-name"
                 placeholder="Enter first name"
@@ -91,8 +82,10 @@ export function UserSheet({
                 required
               />
             </div>
+
             <div className="space-y-2">
               <Label htmlFor="last-name">Last Name</Label>
+
               <Input
                 id="last-name"
                 placeholder="Enter last name"
@@ -104,6 +97,7 @@ export function UserSheet({
 
           <div className="space-y-2">
             <Label htmlFor="email">Email</Label>
+
             <Input
               id="email"
               type="email"
@@ -115,6 +109,7 @@ export function UserSheet({
 
           <div className="space-y-2">
             <Label htmlFor="phone-number">Phone Number</Label>
+
             <Input
               id="phone-number"
               placeholder="Enter phone number"
@@ -124,44 +119,17 @@ export function UserSheet({
 
           <div className="space-y-2">
             <Label>Role</Label>
-            <Combobox
-              items={roleItems}
-              value={selectedRole}
-              onValueChange={(item) => {
-                if (item?.value) {
-                  onRoleChange(item.value);
-                }
-              }}
-              disabled={isRolesLoading}
-              itemToStringLabel={(item) => item.label}
-            >
-              <ComboboxTrigger
-                render={
-                  <Button
-                    type="button"
-                    variant="outline"
-                    className="w-full justify-between font-normal"
-                    disabled={isRolesLoading}
-                  >
-                    <ComboboxValue
-                      placeholder={isRolesLoading ? 'Loading roles...' : 'Select role'}
-                    />
-                  </Button>
-                }
-              />
-              <ComboboxContent container={roleComboboxPortalRef}>
-                <ComboboxInput showTrigger={false} placeholder="Search roles..." />
-                <ComboboxEmpty>No roles found.</ComboboxEmpty>
-                <ComboboxList>
-                  {(item) => (
-                    <ComboboxItem key={item.value} value={item}>
-                      {item.label}
-                    </ComboboxItem>
-                  )}
-                </ComboboxList>
-              </ComboboxContent>
-            </Combobox>
+
+            <RoleCombobox
+              value={roleId}
+              onValueChange={onRoleChange}
+              enabled={open}
+              disabled={isSaving}
+              portalContainer={roleComboboxPortalRef}
+            />
+
             <div ref={roleComboboxPortalRef} />
+
             <input
               type="hidden"
               {...register('role_id', { required: true })}
@@ -179,8 +147,10 @@ export function UserSheet({
             >
               Cancel
             </Button>
+
             <Button type="submit" disabled={isSaving}>
               {isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
+
               {userId ? 'Update User' : 'Create User'}
             </Button>
           </DialogFooter>

src/app/(modules)/users/hooks/useUserQueries.ts

@@ -3,9 +3,8 @@
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 
-import { roleService, userService } from '@/services/api';
-import type { RoleListParams, UserListParams } from '@/types';
-import { roleKeys } from '../../roles/queries/roleKeys';
+import { userService } from '@/services/api';
+import type { UserListParams } from '@/types';
 import { userKeys } from '../queries/userKeys';
 import type { StatusFilter } from './useUserFilters';
 
@@ -16,14 +15,6 @@ interface UseUsersQueryParams {
   statusFilter: StatusFilter;
 }
 
-const roleLookupParams: RoleListParams = {
-  skip: 0,
-  limit: 500,
-  effective_status: true,
-  sort_by: 'display_name',
-  sort_order: 'asc',
-};
-
 function buildUserListParams({
   skip,
   limit,
@@ -52,13 +43,3 @@ export function useUsersQuery(params: UseUsersQueryParams) {
     queryFn: () => userService.getUsers(listParams),
   });
 }
-
-export function useRoleLookupQuery(enabled: boolean) {
-  return useQuery({
-    queryKey: roleKeys.list(roleLookupParams),
-    queryFn: () => roleService.getRoles(roleLookupParams),
-    enabled,
-    staleTime: 5 * 60 * 1000,
-    gcTime: 30 * 60 * 1000,
-  });
-}

src/app/(modules)/users/page.tsx

@@ -18,7 +18,7 @@ import { UserTable } from './components/UserTable';
 import { useUserFilters } from './hooks/useUserFilters';
 import { useUserForm } from './hooks/useUserForm';
 import { useUserStatusMutation } from './hooks/useUserMutations';
-import { useRoleLookupQuery, useUsersQuery } from './hooks/useUserQueries';
+import { useUsersQuery } from './hooks/useUserQueries';
 
 export default function UsersPage() {
   const [isSheetOpen, setIsSheetOpen] = useState(false);
@@ -40,7 +40,6 @@ export default function UsersPage() {
     searchTerm: debouncedSearchTerm,
     statusFilter,
   });
-  const rolesQuery = useRoleLookupQuery(isSheetOpen);
   const userForm = useUserForm({
     onSaved: () => setIsSheetOpen(false),
   });
@@ -85,7 +84,6 @@ export default function UsersPage() {
 
   const total = usersQuery.data?.total ?? 0;
   const users = usersQuery.data?.items ?? [];
-  const roleOptions = rolesQuery.data?.items ?? [];
   const toolbar = useMemo(
     () => (
       <UserFilters
@@ -145,8 +143,6 @@ export default function UsersPage() {
         onSubmit={handleSubmit}
         roleId={roleId}
         onRoleChange={setRoleId}
-        roles={roleOptions}
-        isRolesLoading={rolesQuery.isLoading}
         isSaving={isSaving}
       />
     </>