diff --git a/src/figma-make/components/base/multi-select.tsx b/src/figma-make/components/base/multi-select.tsx
index 63ebdd36..656073c6 100644
--- a/src/figma-make/components/base/multi-select.tsx
+++ b/src/figma-make/components/base/multi-select.tsx
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { Check, ChevronsUpDown, X } from 'lucide-react';
+import { Check, ChevronsUpDown, X, Loader2 } from 'lucide-react';
import { cn } from '@/lib/helper';
import { Button } from '@/figma-make/components/base/button';
import {
@@ -29,6 +29,8 @@ interface MultiSelectProps {
selected: string[];
onChange: (selected: string[]) => void;
onSearchChange?: (value: string) => void;
+ onLoadMore?: () => void;
+ isLoadingMore?: boolean;
placeholder?: string;
className?: string;
disabled?: boolean;
@@ -39,6 +41,8 @@ export function MultiSelect({
selected,
onChange,
onSearchChange,
+ onLoadMore,
+ isLoadingMore,
placeholder = 'Select items...',
className,
disabled,
@@ -115,7 +119,18 @@ export function MultiSelect({
onValueChange={onSearchChange}
/>
No item found.
-
+ {
+ const target = e.currentTarget;
+ if (
+ target.scrollHeight - target.scrollTop <=
+ target.clientHeight + 1
+ ) {
+ onLoadMore?.();
+ }
+ }}
+ >
{options.map((option) => (
))}
+ {isLoadingMore && (
+
+
+
+ )}