Add loader to attribute picker (#1182)

* wip multiselectfield loader

* restyled spinner display

* get rid of redundant debouncer

* wip

* wip multiselectfield loader

* restyled spinner display

* get rid of redundant debouncer

* remove redundant prop

Co-authored-by: Magdalena Markusik <magdalena.markusik@mirumee.com>

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx

@@ -181,7 +181,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
                     fullWidth={true}
                     disabled={disabled}
                   />
-                  {isOpen && (!!inputValue || !!choices.length) && (
+                  {isOpen && (
                     <MultiAutocompleteSelectFieldContent
                       add={
                         add && {
@@ -249,16 +249,12 @@ const MultiAutocompleteSelectField: React.FC<MultiAutocompleteSelectFieldProps>
 
   if (fetchChoices) {
     return (
-      <DebounceAutocomplete debounceFn={fetchChoices}>
-        {debounceFn => (
-          <MultiAutocompleteSelectFieldComponent
-            testId={testId}
-            choices={choices}
-            {...props}
-            fetchChoices={debounceFn}
-          />
-        )}
-      </DebounceAutocomplete>
+      <MultiAutocompleteSelectFieldComponent
+        testId={testId}
+        choices={choices}
+        {...props}
+        fetchChoices={fetchChoices}
+      />
     );
   }
 

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx

@@ -125,7 +125,8 @@ const useStyles = makeStyles(
     progress: {},
     progressContainer: {
       display: "flex",
-      justifyContent: "center"
+      justifyContent: "center",
+      padding: `${theme.spacing(1)}px 0`
     },
     root: {
       borderBottomLeftRadius: 8,
@@ -173,7 +174,6 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
     inputValue,
     onFetchMore
   } = props;
-
   if (!!add && !!displayCustomValue) {
     throw new Error("Add and custom value cannot be displayed simultaneously");
   }
@@ -198,12 +198,12 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
     }
   }, [loading]);
 
+  const hasValuesToDisplay =
+    displayValues.length > 0 || displayCustomValue || choices.length > 0;
   return (
     <Paper className={classes.root}>
-      <div className={classes.content} ref={anchor}>
-        {choices.length > 0 ||
-        displayValues.length > 0 ||
-        displayCustomValue ? (
+      {hasValuesToDisplay && (
+        <div className={classes.content} ref={anchor}>
           <>
             {add && (
               <MenuItem
@@ -298,25 +298,26 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
                 </MenuItem>
               );
             })}
-            {hasMore && (
-              <>
-                <Hr className={classes.hr} />
-                <div className={classes.progressContainer}>
-                  <CircularProgress className={classes.progress} size={24} />
-                </div>
-              </>
-            )}
           </>
-        ) : (
-          <MenuItem
-            disabled={true}
-            component="div"
-            data-test="multiautocomplete-select-no-options"
-          >
-            <FormattedMessage defaultMessage="No results found" />
-          </MenuItem>
-        )}
-      </div>
+        </div>
+      )}
+      {!loading && !hasValuesToDisplay && (
+        <MenuItem
+          disabled={true}
+          component="div"
+          data-test="multiautocomplete-select-no-options"
+        >
+          <FormattedMessage defaultMessage={"No results found"} />
+        </MenuItem>
+      )}
+      {(hasMore || loading) && (
+        <>
+          {hasMore && <Hr className={classes.hr} />}
+          <div className={classes.progressContainer}>
+            <CircularProgress className={classes.progress} size={24} />
+          </div>
+        </>
+      )}
       {choices.length > maxMenuItems && (
         <div className={classes.arrowContainer}>
           <div

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx

@@ -242,15 +242,11 @@ const SingleAutocompleteSelectField: React.FC<SingleAutocompleteSelectFieldProps
 
   if (fetchChoices) {
     return (
-      <DebounceAutocomplete debounceFn={fetchChoices}>
-        {debounceFn => (
-          <SingleAutocompleteSelectFieldComponent
-            choices={choices}
-            {...rest}
-            fetchChoices={debounceFn}
-          />
-        )}
-      </DebounceAutocomplete>
+      <SingleAutocompleteSelectFieldComponent
+        choices={choices}
+        {...rest}
+        fetchChoices={fetchChoices}
+      />
     );
   }
 

src/utils/handlers/attributeValueSearchHandler.ts

@@ -40,7 +40,6 @@ function createAttributeValueSearchHandler(
       search("");
     }
   }, [state.id]);
-
   return {
     loadMore,
     search: handleSearch,