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>