feat: place loading indicator in place of dropdown indicator

Author: eshankvaish

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -35,7 +35,6 @@ import {
     SelectPickerControl,
     SelectPickerDropdownIndicator,
     SelectPickerGroupHeading,
-    SelectPickerLoadingIndicator,
     SelectPickerMenuList,
     SelectPickerOption,
     SelectPickerValueContainer,
@@ -426,7 +425,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                         ref={selectRef}
                         components={{
                             IndicatorSeparator: null,
-                            LoadingIndicator: SelectPickerLoadingIndicator,
+                            LoadingIndicator: null,
                             DropdownIndicator: SelectPickerDropdownIndicator,
                             Control: SelectPickerControl,
                             Option: renderOption,

src/Shared/Components/SelectPicker/common.tsx

@@ -64,11 +64,14 @@ const getTooltipProps = (tooltipProps: SelectPickerOptionType['tooltipProps'] =
 export const SelectPickerDropdownIndicator = <OptionValue,>(
     props: DropdownIndicatorProps<SelectPickerOptionType<OptionValue>>,
 ) => {
-    const { isDisabled } = props
+    const {
+        isDisabled,
+        selectProps: { isLoading },
+    } = props
 
     return (
         <components.DropdownIndicator {...props}>
-            <ICCaretDown className={isDisabled ? 'scn-3' : 'scn-6'} />
+            {isLoading ? <Progressing /> : <ICCaretDown className={isDisabled ? 'scn-3' : 'scn-6'} />}
         </components.DropdownIndicator>
     )
 }
@@ -169,8 +172,6 @@ export const SelectPickerValueContainer = <OptionValue, IsMulti extends boolean>
     )
 }
 
-export const SelectPickerLoadingIndicator = () => <Progressing />
-
 export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
     disableDescriptionEllipsis,
     ...props