feat: implement lazy loading in SelectInput

src/components/pages/report/production-result/ProductionResultContent.tsx

@@ -62,6 +62,7 @@ const ProductionResultContent = () => {
     setInputValue: setAreaInputValue,
     options: areaOptions,
     isLoadingOptions: isLoadingAreaOptions,
+    loadMore: loadMoreAreas,
   } = useSelect<BaseKandang>(AreaApi.basePath, 'id', 'name');
 
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -78,6 +79,7 @@ const ProductionResultContent = () => {
     setInputValue: setLocationInputValue,
     options: locationOptions,
     isLoadingOptions: isLoadingLocationOptions,
+    loadMore: loadMoreLocations,
   } = useSelect<BaseKandang>(LocationApi.basePath, 'id', 'name', 'search', {
     area_id: selectedArea ? ((selectedArea as OptionType).value as string) : '',
   });
@@ -94,6 +96,7 @@ const ProductionResultContent = () => {
     setInputValue: setProjectFlockInputValue,
     options: projectFlockOptions,
     isLoadingOptions: isLoadingProjectFlockOptions,
+    loadMore: loadMoreProjectFlocks,
   } = useSelect<BaseKandang>(
     ProjectFlockApi.basePath,
     'id',
@@ -120,6 +123,7 @@ const ProductionResultContent = () => {
     setInputValue: setProjectFlockKandangInputValue,
     options: projectFlockKandangOptions,
     isLoadingOptions: isLoadingProjectFlockKandangOptions,
+    loadMore: loadMoreProjectFlockKandangs,
   } = useSelect<BaseKandang>(
     ProjectFlockKandangApi.basePath,
     'id',
@@ -235,6 +239,7 @@ const ProductionResultContent = () => {
               value={selectedArea}
               onChange={areaChangeHandler}
               onInputChange={setAreaInputValue}
+              onMenuScrollToBottom={loadMoreAreas}
               isClearable
               className={{
                 wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
@@ -251,6 +256,7 @@ const ProductionResultContent = () => {
               value={selectedLocation}
               onChange={locationChangeHandler}
               onInputChange={setLocationInputValue}
+              onMenuScrollToBottom={loadMoreLocations}
               isClearable
               isDisabled={!selectedArea}
               className={{
@@ -270,6 +276,7 @@ const ProductionResultContent = () => {
               value={selectedProjectFlock}
               onChange={projectFlockChangeHandler}
               onInputChange={setProjectFlockInputValue}
+              onMenuScrollToBottom={loadMoreProjectFlocks}
               isClearable
               isDisabled={!selectedArea || !selectedLocation}
               className={{
@@ -289,6 +296,7 @@ const ProductionResultContent = () => {
               value={selectedProjectFlockKandang}
               onChange={projectFlockKandangChangeHandler}
               onInputChange={setProjectFlockKandangInputValue}
+              onMenuScrollToBottom={loadMoreProjectFlockKandangs}
               isClearable
               isDisabled={!selectedProjectFlock}
               className={{