feat: product select

src/components/ProductSelect/ProductSelect.tsx

@@ -3,15 +3,16 @@ import {FC} from "react";
 import useProductsList from "../../pages/ProductsPage/hooks/useProductsList.tsx";
 import {omit} from "lodash";
 import ObjectSelect, {ObjectSelectProps} from "../ObjectSelect/ObjectSelect.tsx";
-import {ComboboxItem, OptionsFilter, SelectProps, Text, Tooltip, Image, rem} from "@mantine/core";
+import {ComboboxItem, Image, Loader, OptionsFilter, rem, SelectProps, Text, Tooltip} from "@mantine/core";
 import {getProductFields} from "../../types/utils.ts";
 
 type RestProps = {
     clientId: number;
 }
+const MAX_PRODUCTS = 200;
 type Props = Omit<ObjectSelectProps<ProductSchema>, 'data'> & RestProps;
 const ProductSelect: FC<Props> = (props: Props) => {
-    const {products} = useProductsList({
+    const {products, isLoading} = useProductsList({
         clientId: props.clientId,
         searchInput: ""
     });
@@ -62,11 +63,17 @@ const ProductSelect: FC<Props> = (props: Props) => {
         );
 
         filtered.sort((a, b) => a.label.localeCompare(b.label));
-        return filtered;
+
+        return filtered.length > MAX_PRODUCTS ? filtered.slice(0, MAX_PRODUCTS) : filtered;
     };
     return (
         <ObjectSelect
-            limit={products.length > 500 ? 500 : Infinity}
+            disabled={isLoading}
+            rightSection={
+                isLoading ?
+                    <Loader size={"sm"}/> : null
+            }
+            limit={products.length > MAX_PRODUCTS ? MAX_PRODUCTS : Infinity}
             renderOption={renderOption}
             searchable
             {...restProps}