@zohodesk/components 1.6.19 → 1.6.20

package/README.md

@@ -2,6 +2,15 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.6.20
+
+**Select**, **MultiSelect**, **GroupSelect**, **SelectWithAvatar**, **SelectWithIcon**, **MultiSelectWithAvatar**, **AdvancedMultiSelect**
+- `shouldUseInternalLoader` prop introduced
+- It controls whether the component manages fetch-more loading visibility internally via `isFetchingOptions` state, or delegates it to the external `isLoading` prop
+
+**Select**, **MultiSelect**
+- Unwanted scroll to highlighted option function excution stopped - Performance fix
+
 # 1.6.19
 
 - **DropBoxElement**
@@ -28,7 +37,6 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 - **Select**
   - Added `closePopup` callback support to `getFooter` prop, allowing footer actions to close the popup programmatically.
 
-
 # 1.6.14
 
 - **v1/Button**

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -382,6 +382,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       needEffect,
       disabledOptions,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       customClass,
       isAbsolutePositioningNeeded,
@@ -433,6 +434,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     });
     let isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
     const isEditable = !(isReadOnly || isDisabled);
+    const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${containerClass}`,
       "data-id": dataIdMultiSelectComp,
@@ -536,7 +538,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     }, DropBoxProps, {
       alignBox: "row",
       isResponsivePadding: getFooter ? false : true
-    }), isLoading ? /*#__PURE__*/React.createElement(Container, {
+    }), (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
@@ -577,7 +579,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       dataId: dataIdLoading,
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+    }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       align: "both"
     }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)))) : null);

package/es/MultiSelect/MultiSelect.js

@@ -190,7 +190,8 @@ export class MultiSelectComponent extends React.Component {
 
   componentDidUpdate(prevProps, prevState) {
     const {
-      searchStr
+      searchStr,
+      hoverOption
     } = this.state;
     const {
       needLocalSearch,
@@ -201,9 +202,10 @@ export class MultiSelectComponent extends React.Component {
     } = this.props; //handle dropbox open & close
 
     if (prevProps.isPopupOpen !== isPopupOpen) {
-      isPopupOpen && onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
-
-      if (!isPopupOpen) {
+      if (isPopupOpen) {
+        this.scrollToHighlightedIndex();
+        onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
+      } else {
         this.setState({
           hoverOption: 0
         });
@@ -212,7 +214,7 @@ export class MultiSelectComponent extends React.Component {
       }
     }
 
-    if (isPopupOpen) {
+    if (prevState.hoverOption !== hoverOption && isPopupOpen) {
       this.scrollToHighlightedIndex();
     } //When suggestions length less than 5, getNextOptions function call
 
@@ -1086,6 +1088,7 @@ export class MultiSelectComponent extends React.Component {
       needEffect,
       boxSize,
       isLoading,
+      shouldUseInternalLoader,
       selectAllText,
       needSelectAll,
       isVirtualizerEnabled,
@@ -1116,6 +1119,7 @@ export class MultiSelectComponent extends React.Component {
     let {
       SuggestionsProps
     } = customProps;
+    const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -1165,7 +1169,7 @@ export class MultiSelectComponent extends React.Component {
       selectAllText: selectAllText,
       suggestions: suggestions,
       dataId: dataId
-    })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
+    })) : null, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
@@ -1201,7 +1205,7 @@ export class MultiSelectComponent extends React.Component {
       palette: palette,
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+    }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       align: "both"
     }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null))) : null);

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -96,6 +96,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       isBoxPaddingNeed,
       needEffect,
       isLoading,
+      shouldUseInternalLoader,
       keepSelectedOptions,
       customProps,
       limit
@@ -124,6 +125,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     const ariaErrorId = this.getNextAriaId();
     const popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
     let isModel = isMobilePopover(needResponsive);
+    const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
       className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -171,7 +173,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       selectAllText: selectAllText,
       suggestions: suggestions,
       dataId: dataId
-    })) : null, isLoading ? /*#__PURE__*/React.createElement(Container, {
+    })) : null, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(CardContent, {
@@ -204,7 +206,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       palette: palette,
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+    }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       align: "both"
     }, /*#__PURE__*/React.createElement(Loader, null)))))) : null);

package/es/MultiSelect/props/defaultProps.js

@@ -70,6 +70,7 @@ export const AdvancedMultiSelect_defaultProps = {
   customProps: {},
   needEffect: true,
   isLoading: false,
+  shouldUseInternalLoader: true,
   dataSelectorId: 'advancedMultiSelect',
   customClass: {},
   isAbsolutePositioningNeeded: true,
@@ -117,6 +118,7 @@ export const MultiSelect_defaultProps = {
   needEffect: true,
   boxSize: 'default',
   isLoading: false,
+  shouldUseInternalLoader: true,
   dataSelectorId: 'multiSelect',
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
@@ -157,6 +159,7 @@ export const MultiSelectWithAvatar_defaultProps = {
   isRestrictScroll: false,
   needEffect: true,
   isLoading: false,
+  shouldUseInternalLoader: true,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
   customProps: {},

package/es/MultiSelect/props/propTypes.js

@@ -109,6 +109,7 @@ export const MultiSelect_propTypes = {
   positionsOffset: PropTypes.object,
   targetOffset: PropTypes.object,
   isLoading: PropTypes.bool,
+  shouldUseInternalLoader: PropTypes.bool,
   dataSelectorId: PropTypes.string,
   keepSelectedOptions: PropTypes.bool,
   needSelectAll: PropTypes.bool,

package/es/Select/GroupSelect.js

@@ -591,6 +591,7 @@ export class GroupSelectComponent extends PureComponent {
       htmlId,
       iconOnHover,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       customProps,
       customClass
@@ -631,6 +632,7 @@ export class GroupSelectComponent extends PureComponent {
       dropBox: dropBoxClass = '',
       cardContent: cardContentClass = ''
     } = customClass;
+    const isInitialEmptyOptions = searchStr.length === 0 && revampedGroups.length === 0;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-id": dataIdSlctComp,
@@ -736,7 +738,7 @@ export class GroupSelectComponent extends PureComponent {
       customClass: {
         customDropBox: dropBoxClass
       }
-    }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+    }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
@@ -808,7 +810,7 @@ export class GroupSelectComponent extends PureComponent {
       isLoading: isFetchingOptions,
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+    }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       align: "both"
     }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)))) : null);

package/es/Select/Select.js

@@ -218,10 +218,11 @@ export class SelectComponent extends Component {
     }
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     let {
       searchStr,
-      selectedValueIndex
+      selectedValueIndex,
+      hoverIndex
     } = this.state;
     let {
       needLocalSearch,
@@ -233,12 +234,13 @@ export class SelectComponent extends Component {
       isSearchClearOnClose
     } = this.props;
 
-    if (isPopupOpen) {
+    if ((prevState.hoverIndex !== hoverIndex || prevState.selectedValueIndex !== selectedValueIndex) && isPopupOpen) {
       this.scrollToHighlightedIndex();
     }
 
     if (prevProps.isPopupOpen !== isPopupOpen) {
       if (isPopupOpen) {
+        this.scrollToHighlightedIndex();
         onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
         setTimeout(() => {
           this.searchInput && this.searchInput.focus({
@@ -799,6 +801,7 @@ export class SelectComponent extends Component {
       autoComplete,
       ariaLabelledby,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       isAbsolutePositioningNeeded,
       positionsOffset,
@@ -843,6 +846,7 @@ export class SelectComponent extends Component {
       dropBox: dropBoxClass = '',
       cardContent: cardContentClass = ''
     } = customClass;
+    const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
       setAriaId,
       isReadOnly,
@@ -1018,7 +1022,7 @@ export class SelectComponent extends Component {
       customClass: {
         customDropBox: dropBoxClass
       }
-    }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+    }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, !getChildren ? /*#__PURE__*/React.createElement(Box, {
@@ -1085,7 +1089,7 @@ export class SelectComponent extends Component {
       getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+    }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       align: "both"
     }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter({

package/es/Select/SelectWithAvatar.js

@@ -170,6 +170,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       htmlId,
       needEffect,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       getTargetRef,
       customProps,
@@ -204,6 +205,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       dropBox: dropBoxClass = '',
       cardContent: cardContentClass = ''
     } = customClass;
+    const isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -289,7 +291,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       customClass: {
         customDropBox: dropBoxClass
       }
-    }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+    }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
@@ -351,7 +353,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       dataId: dataId,
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+    }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       align: "both"
     }, /*#__PURE__*/React.createElement(Loader, null))))))) : null);

package/es/Select/SelectWithIcon.js

@@ -357,6 +357,7 @@ class SelectWithIcon extends Component {
       i18nKeys,
       htmlId,
       isLoading,
+      shouldUseInternalLoader,
       dataSelectorId,
       customProps,
       customClass
@@ -383,6 +384,7 @@ class SelectWithIcon extends Component {
       dropBox: dropBoxClass = '',
       cardContent: cardContentClass = ''
     } = customClass;
+    const isInitialEmptyOptions = searchValue.length === 0 && options.length === 0;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-title": isDisabled ? title : null,
@@ -480,7 +482,7 @@ class SelectWithIcon extends Component {
       customClass: {
         customDropBox: dropBoxClass
       }
-    }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+    }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/React.createElement(Container, {
       align: "both",
       className: style.loader
     }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Box, {
@@ -556,7 +558,7 @@ class SelectWithIcon extends Component {
       dataId: dataId,
       i18nKeys: i18nKeys,
       htmlId: ariaErrorId
-    }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+    }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       align: "both"
     }, /*#__PURE__*/React.createElement(Loader, null))))))) : null);

package/es/Select/__tests__/SelectWithIcon.spec.js

@@ -6,7 +6,9 @@ describe('SelectWithIcon', () => {
     const mockOnChange = jest.fn();
     const {
       asFragment
-    } = render( /*#__PURE__*/React.createElement(SelectWithIcon, null));
+    } = render( /*#__PURE__*/React.createElement(SelectWithIcon, {
+      options: []
+    }));
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/es/Select/props/defaultProps.js

@@ -35,6 +35,7 @@ export const Select_defaultProps = {
   iconOnHover: false,
   customProps: {},
   isLoading: false,
+  shouldUseInternalLoader: true,
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
   inputFieldLineA11y: {},
@@ -75,6 +76,7 @@ export const GroupSelect_defaultProps = {
   i18nKeys: {},
   iconOnHover: false,
   isLoading: false,
+  shouldUseInternalLoader: true,
   customProps: {},
   allowValueFallback: true,
   customClass: {}
@@ -105,6 +107,7 @@ export const SelectWithAvatar_defaultProps = {
   customProps: {},
   needEffect: true,
   isLoading: false,
+  shouldUseInternalLoader: true,
   customProps: {},
   customClass: {}
 };
@@ -133,6 +136,7 @@ export const SelectWithIcon_defaultProps = {
   iconSize: '14',
   i18nKeys: {},
   isLoading: false,
+  shouldUseInternalLoader: true,
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   customProps: {},

package/es/Select/props/propTypes.js

@@ -92,6 +92,7 @@ export const Select_propTypes = {
     InputFieldLineProps: PropTypes.object
   }),
   isLoading: PropTypes.bool,
+  shouldUseInternalLoader: PropTypes.bool,
   dataSelectorId: PropTypes.string,
   isAbsolutePositioningNeeded: PropTypes.bool,
   openPopupOnly: PropTypes.bool,
@@ -189,6 +190,7 @@ export const GroupSelect_propTypes = {
     searchEmptyText: PropTypes.string
   }),
   isLoading: PropTypes.bool,
+  shouldUseInternalLoader: PropTypes.bool,
   dataSelectorId: PropTypes.string,
   isDefaultSelectValue: PropTypes.bool,
   customProps: PropTypes.shape({
@@ -316,6 +318,7 @@ export const SelectWithIcon_propTypes = {
   valueKey: PropTypes.string,
   htmlId: PropTypes.string,
   isLoading: PropTypes.bool,
+  shouldUseInternalLoader: PropTypes.bool,
   dataSelectorId: PropTypes.string,
   title: PropTypes.string,
   className: PropTypes.string,

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -453,6 +453,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           needEffect = _this$props6.needEffect,
           disabledOptions = _this$props6.disabledOptions,
           isLoading = _this$props6.isLoading,
+          shouldUseInternalLoader = _this$props6.shouldUseInternalLoader,
           dataSelectorId = _this$props6.dataSelectorId,
           customClass = _this$props6.customClass,
           isAbsolutePositioningNeeded = _this$props6.isAbsolutePositioningNeeded,
@@ -502,6 +503,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
 
       var isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
       var isEditable = !(isReadOnly || isDisabled);
+      var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(containerClass),
         "data-id": dataIdMultiSelectComp,
@@ -604,7 +606,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         }, DropBoxProps, {
           alignBox: "row",
           isResponsivePadding: getFooter ? false : true
-        }), isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }), (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _MultiSelectModule["default"].loader
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -645,7 +647,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           dataId: dataIdLoading,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
-        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,
           align: "both"
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)));

package/lib/MultiSelect/MultiSelect.js

@@ -270,7 +270,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var searchStr = this.state.searchStr;
+      var _this$state2 = this.state,
+          searchStr = _this$state2.searchStr,
+          hoverOption = _this$state2.hoverOption;
       var _this$props2 = this.props,
           needLocalSearch = _this$props2.needLocalSearch,
           isPopupOpen = _this$props2.isPopupOpen,
@@ -279,9 +281,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isSearchClearOnClose = _this$props2.isSearchClearOnClose; //handle dropbox open & close
 
       if (prevProps.isPopupOpen !== isPopupOpen) {
-        isPopupOpen && onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
-
-        if (!isPopupOpen) {
+        if (isPopupOpen) {
+          this.scrollToHighlightedIndex();
+          onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
+        } else {
           this.setState({
             hoverOption: 0
           });
@@ -290,7 +293,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      if (isPopupOpen) {
+      if (prevState.hoverOption !== hoverOption && isPopupOpen) {
         this.scrollToHighlightedIndex();
       } //When suggestions length less than 5, getNextOptions function call
 
@@ -366,10 +369,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
     key: "handleInputCick",
     value: function handleInputCick(e) {
       var removeClose = this.props.removeClose;
-      var _this$state2 = this.state,
-          highLightedSelectOptions = _this$state2.highLightedSelectOptions,
-          _this$state2$searchSt = _this$state2.searchStr,
-          searchStr = _this$state2$searchSt === void 0 ? '' : _this$state2$searchSt;
+      var _this$state3 = this.state,
+          highLightedSelectOptions = _this$state3.highLightedSelectOptions,
+          _this$state3$searchSt = _this$state3.searchStr,
+          searchStr = _this$state3$searchSt === void 0 ? '' : _this$state3$searchSt;
 
       if (highLightedSelectOptions.length) {
         this.setState({
@@ -387,11 +390,11 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleFilterSuggestions",
     value: function handleFilterSuggestions() {
-      var _this$state3 = this.state,
-          _this$state3$options = _this$state3.options,
-          options = _this$state3$options === void 0 ? dummyArray : _this$state3$options,
-          _this$state3$searchSt = _this$state3.searchStr,
-          searchStr = _this$state3$searchSt === void 0 ? '' : _this$state3$searchSt;
+      var _this$state4 = this.state,
+          _this$state4$options = _this$state4.options,
+          options = _this$state4$options === void 0 ? dummyArray : _this$state4$options,
+          _this$state4$searchSt = _this$state4.searchStr,
+          searchStr = _this$state4$searchSt === void 0 ? '' : _this$state4$searchSt;
       var _this$props4 = this.props,
           selectedOptions = _this$props4.selectedOptions,
           needLocalSearch = _this$props4.needLocalSearch,
@@ -420,13 +423,13 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           metaKey = e.metaKey,
           shiftKey = e.shiftKey;
       var suggestions = [];
-      var _this$state4 = this.state,
-          hoverOption = _this$state4.hoverOption,
-          searchStr = _this$state4.searchStr,
-          highLightedSelectOptions = _this$state4.highLightedSelectOptions,
-          lastHighLightedSelectOption = _this$state4.lastHighLightedSelectOption,
-          shiftKeyPressHighLighted = _this$state4.shiftKeyPressHighLighted,
-          selectedOptions = _this$state4.selectedOptionIds;
+      var _this$state5 = this.state,
+          hoverOption = _this$state5.hoverOption,
+          searchStr = _this$state5.searchStr,
+          highLightedSelectOptions = _this$state5.highLightedSelectOptions,
+          lastHighLightedSelectOption = _this$state5.lastHighLightedSelectOption,
+          shiftKeyPressHighLighted = _this$state5.shiftKeyPressHighLighted,
+          selectedOptions = _this$state5.selectedOptionIds;
       var _this$props5 = this.props,
           isNextOptions = _this$props5.isNextOptions,
           getNextOptions = _this$props5.getNextOptions,
@@ -646,10 +649,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props7 = this.props,
           selectedOptions = _this$props7.selectedOptions,
           isReadOnly = _this$props7.isReadOnly;
-      var _this$state5 = this.state,
-          highLightedSelectOptions = _this$state5.highLightedSelectOptions,
-          lastHighLightedSelectOption = _this$state5.lastHighLightedSelectOption,
-          shiftKeyPressHighLighted = _this$state5.shiftKeyPressHighLighted;
+      var _this$state6 = this.state,
+          highLightedSelectOptions = _this$state6.highLightedSelectOptions,
+          lastHighLightedSelectOption = _this$state6.lastHighLightedSelectOption,
+          shiftKeyPressHighLighted = _this$state6.shiftKeyPressHighLighted;
 
       if (newOptions.length && !isReadOnly) {
         var newSelectedOptions = selectedOptions.filter(function (option) {
@@ -768,9 +771,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
       var e = arguments.length > 1 ? arguments[1] : undefined;
       var selectedOptions = this.props.selectedOptions;
-      var _this$state6 = this.state,
-          highLightedSelectOptions = _this$state6.highLightedSelectOptions,
-          lastHighLightedSelectOption = _this$state6.lastHighLightedSelectOption;
+      var _this$state7 = this.state,
+          highLightedSelectOptions = _this$state7.highLightedSelectOptions,
+          lastHighLightedSelectOption = _this$state7.lastHighLightedSelectOption;
       var metaKey = e.metaKey,
           ctrlKey = e.ctrlKey,
           shiftKey = e.shiftKey;
@@ -925,9 +928,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleActive",
     value: function handleActive(e) {
-      var _this$state7 = this.state,
-          searchStr = _this$state7.searchStr,
-          isActive = _this$state7.isActive;
+      var _this$state8 = this.state,
+          searchStr = _this$state8.searchStr,
+          isActive = _this$state8.isActive;
 
       if (!isActive) {
         this.setState({
@@ -1023,11 +1026,11 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isPopupReady = _this$props14.isPopupReady,
           renderCustomClearComponent = _this$props14.renderCustomClearComponent,
           renderCustomToggleIndicator = _this$props14.renderCustomToggleIndicator;
-      var _this$state8 = this.state,
-          isActive = _this$state8.isActive,
-          selectedOptions = _this$state8.selectedOptions,
-          highLightedSelectOptions = _this$state8.highLightedSelectOptions,
-          searchStr = _this$state8.searchStr;
+      var _this$state9 = this.state,
+          isActive = _this$state9.isActive,
+          selectedOptions = _this$state9.selectedOptions,
+          highLightedSelectOptions = _this$state9.highLightedSelectOptions,
+          searchStr = _this$state9.searchStr;
       var _i18nKeys$clearText = i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _i18nKeys$clearText;
       var _a11y$clearLabel = a11y.clearLabel,
@@ -1170,18 +1173,19 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           needEffect = _this$props15.needEffect,
           boxSize = _this$props15.boxSize,
           isLoading = _this$props15.isLoading,
+          shouldUseInternalLoader = _this$props15.shouldUseInternalLoader,
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
           isVirtualizerEnabled = _this$props15.isVirtualizerEnabled,
           limit = _this$props15.limit,
           customProps = _this$props15.customProps;
-      var _this$state9 = this.state,
-          selectedOptions = _this$state9.selectedOptions,
-          searchStr = _this$state9.searchStr,
-          hoverOption = _this$state9.hoverOption,
-          options = _this$state9.options,
-          isFetchingOptions = _this$state9.isFetchingOptions,
-          selectedOptionIds = _this$state9.selectedOptionIds;
+      var _this$state10 = this.state,
+          selectedOptions = _this$state10.selectedOptions,
+          searchStr = _this$state10.searchStr,
+          hoverOption = _this$state10.hoverOption,
+          options = _this$state10.options,
+          isFetchingOptions = _this$state10.isFetchingOptions,
+          selectedOptionIds = _this$state10.selectedOptionIds;
       var _i18nKeys = i18nKeys,
           _i18nKeys$searchText = _i18nKeys.searchText,
           searchText = _i18nKeys$searchText === void 0 ? _constants.MULTISELECT_I18N_KEYS.searchText : _i18nKeys$searchText,
@@ -1197,6 +1201,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       });
       var isModel = (0, _isMobilePopover["default"])(needResponsive);
       var SuggestionsProps = customProps.SuggestionsProps;
+      var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -1246,7 +1251,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         selectAllText: selectAllText,
         suggestions: suggestions,
         dataId: dataId
-      })) : null, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      })) : null, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         className: _MultiSelectModule["default"].loader
       }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
@@ -1282,7 +1287,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         palette: palette,
         i18nKeys: i18nKeys,
         htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         align: "both"
       }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null))) : null);

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -153,6 +153,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           isBoxPaddingNeed = _this$props.isBoxPaddingNeed,
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
+          shouldUseInternalLoader = _this$props.shouldUseInternalLoader,
           keepSelectedOptions = _this$props.keepSelectedOptions,
           customProps = _this$props.customProps,
           limit = _this$props.limit;
@@ -178,6 +179,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
       var ariaErrorId = this.getNextAriaId();
       var popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
       var isModel = (0, _isMobilePopover["default"])(needResponsive);
+      var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: " ".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -225,7 +227,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         selectAllText: selectAllText,
         suggestions: suggestions,
         dataId: dataId
-      })) : null, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      })) : null, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         className: _MultiSelectModule["default"].loader
       }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
@@ -258,7 +260,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         palette: palette,
         i18nKeys: i18nKeys,
         htmlId: ariaErrorId
-      }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         align: "both"
       }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)))))) : null);

package/lib/MultiSelect/props/defaultProps.js

@@ -79,6 +79,7 @@ var AdvancedMultiSelect_defaultProps = {
   customProps: {},
   needEffect: true,
   isLoading: false,
+  shouldUseInternalLoader: true,
   dataSelectorId: 'advancedMultiSelect',
   customClass: {},
   isAbsolutePositioningNeeded: true,
@@ -128,6 +129,7 @@ var MultiSelect_defaultProps = {
   needEffect: true,
   boxSize: 'default',
   isLoading: false,
+  shouldUseInternalLoader: true,
   dataSelectorId: 'multiSelect',
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
@@ -170,6 +172,7 @@ var MultiSelectWithAvatar_defaultProps = {
   isRestrictScroll: false,
   needEffect: true,
   isLoading: false,
+  shouldUseInternalLoader: true,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
   customProps: {},

package/lib/MultiSelect/props/propTypes.js

@@ -128,6 +128,7 @@ var MultiSelect_propTypes = {
   positionsOffset: _propTypes["default"].object,
   targetOffset: _propTypes["default"].object,
   isLoading: _propTypes["default"].bool,
+  shouldUseInternalLoader: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
   keepSelectedOptions: _propTypes["default"].bool,
   needSelectAll: _propTypes["default"].bool,

package/lib/Select/GroupSelect.js

@@ -669,6 +669,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           htmlId = _this$props9.htmlId,
           iconOnHover = _this$props9.iconOnHover,
           isLoading = _this$props9.isLoading,
+          shouldUseInternalLoader = _this$props9.shouldUseInternalLoader,
           dataSelectorId = _this$props9.dataSelectorId,
           customProps = _this$props9.customProps,
           customClass = _this$props9.customClass;
@@ -708,6 +709,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
+      var isInitialEmptyOptions = searchStr.length === 0 && revampedGroups.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,
@@ -813,7 +815,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           customClass: {
             customDropBox: dropBoxClass
           }
-        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -883,7 +885,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           isLoading: isFetchingOptions,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
-        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,
           align: "both"
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)));

package/lib/Select/Select.js

@@ -274,12 +274,13 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
+    value: function componentDidUpdate(prevProps, prevState) {
       var _this2 = this;
 
       var _this$state = this.state,
           searchStr = _this$state.searchStr,
-          selectedValueIndex = _this$state.selectedValueIndex;
+          selectedValueIndex = _this$state.selectedValueIndex,
+          hoverIndex = _this$state.hoverIndex;
       var _this$props = this.props,
           needLocalSearch = _this$props.needLocalSearch,
           onDropBoxClose = _this$props.onDropBoxClose,
@@ -289,12 +290,13 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           isPopupOpen = _this$props.isPopupOpen,
           isSearchClearOnClose = _this$props.isSearchClearOnClose;
 
-      if (isPopupOpen) {
+      if ((prevState.hoverIndex !== hoverIndex || prevState.selectedValueIndex !== selectedValueIndex) && isPopupOpen) {
         this.scrollToHighlightedIndex();
       }
 
       if (prevProps.isPopupOpen !== isPopupOpen) {
         if (isPopupOpen) {
+          this.scrollToHighlightedIndex();
           onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
           setTimeout(function () {
             _this2.searchInput && _this2.searchInput.focus({
@@ -849,6 +851,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           autoComplete = _this$props11.autoComplete,
           ariaLabelledby = _this$props11.ariaLabelledby,
           isLoading = _this$props11.isLoading,
+          shouldUseInternalLoader = _this$props11.shouldUseInternalLoader,
           dataSelectorId = _this$props11.dataSelectorId,
           isAbsolutePositioningNeeded = _this$props11.isAbsolutePositioningNeeded,
           positionsOffset = _this$props11.positionsOffset,
@@ -894,6 +897,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
+      var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       var inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
         setAriaId: setAriaId,
         isReadOnly: isReadOnly,
@@ -1067,7 +1071,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           customClass: {
             customDropBox: dropBoxClass
           }
-        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -1133,7 +1137,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           getCustomEmptyState: getCustomEmptyState ? _this7.handleGetAddNewOptionText : null,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
-        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,
           align: "both"
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter({

package/lib/Select/SelectWithAvatar.js

@@ -221,6 +221,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           htmlId = _this$props.htmlId,
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
+          shouldUseInternalLoader = _this$props.shouldUseInternalLoader,
           dataSelectorId = _this$props.dataSelectorId,
           getTargetRef = _this$props.getTargetRef,
           customProps = _this$props.customProps,
@@ -253,6 +254,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
+      var isInitialEmptyOptions = searchStr.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -338,7 +340,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           customClass: {
             customDropBox: dropBoxClass
           }
-        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _MultiSelectModule["default"].loader
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -400,7 +402,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           dataId: dataId,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
-        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,
           align: "both"
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))))));

package/lib/Select/SelectWithIcon.js

@@ -431,6 +431,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           i18nKeys = _this$props7.i18nKeys,
           htmlId = _this$props7.htmlId,
           isLoading = _this$props7.isLoading,
+          shouldUseInternalLoader = _this$props7.shouldUseInternalLoader,
           dataSelectorId = _this$props7.dataSelectorId,
           customProps = _this$props7.customProps,
           customClass = _this$props7.customClass;
@@ -457,6 +458,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           dropBoxClass = _customClass$dropBox === void 0 ? '' : _customClass$dropBox,
           _customClass$cardCont = customClass.cardContent,
           cardContentClass = _customClass$cardCont === void 0 ? '' : _customClass$cardCont;
+      var isInitialEmptyOptions = searchValue.length === 0 && options.length === 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
         "data-title": isDisabled ? title : null,
@@ -553,7 +555,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           customClass: {
             customDropBox: dropBoxClass
           }
-        }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }, (shouldUseInternalLoader ? isLoading : isLoading && isInitialEmptyOptions) ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -627,7 +629,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           dataId: dataId,
           i18nKeys: i18nKeys,
           htmlId: ariaErrorId
-        }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        }), (shouldUseInternalLoader ? isFetchingOptions : isLoading && !isInitialEmptyOptions) && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,
           align: "both"
         }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))))));

package/lib/Select/__tests__/SelectWithIcon.spec.js

@@ -12,7 +12,9 @@ describe('SelectWithIcon', function () {
   test('rendering the defult props', function () {
     var mockOnChange = jest.fn();
 
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectWithIcon["default"], null)),
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_SelectWithIcon["default"], {
+      options: []
+    })),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();

package/lib/Select/props/defaultProps.js

@@ -47,6 +47,7 @@ var Select_defaultProps = {
   iconOnHover: false,
   customProps: {},
   isLoading: false,
+  shouldUseInternalLoader: true,
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
   inputFieldLineA11y: {},
@@ -88,6 +89,7 @@ var GroupSelect_defaultProps = {
   i18nKeys: {},
   iconOnHover: false,
   isLoading: false,
+  shouldUseInternalLoader: true,
   customProps: {},
   allowValueFallback: true,
   customClass: {}
@@ -118,7 +120,8 @@ var SelectWithAvatar_defaultProps = (_SelectWithAvatar_def = {
   i18nKeys: {},
   customProps: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  shouldUseInternalLoader: true
 }, _defineProperty(_SelectWithAvatar_def, "customProps", {}), _defineProperty(_SelectWithAvatar_def, "customClass", {}), _SelectWithAvatar_def);
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
@@ -130,5 +133,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _defineProperty(_SelectWithIcon_defau, "customClass", {}), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "shouldUseInternalLoader", true), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _defineProperty(_SelectWithIcon_defau, "customClass", {}), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

package/lib/Select/props/propTypes.js

@@ -108,6 +108,7 @@ var Select_propTypes = {
     InputFieldLineProps: _propTypes["default"].object
   }),
   isLoading: _propTypes["default"].bool,
+  shouldUseInternalLoader: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
   isAbsolutePositioningNeeded: _propTypes["default"].bool,
   openPopupOnly: _propTypes["default"].bool,
@@ -206,6 +207,7 @@ var GroupSelect_propTypes = {
     searchEmptyText: _propTypes["default"].string
   }),
   isLoading: _propTypes["default"].bool,
+  shouldUseInternalLoader: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
   isDefaultSelectValue: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
@@ -337,6 +339,7 @@ var SelectWithIcon_propTypes = {
   valueKey: _propTypes["default"].string,
   htmlId: _propTypes["default"].string,
   isLoading: _propTypes["default"].bool,
+  shouldUseInternalLoader: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
   title: _propTypes["default"].string,
   className: _propTypes["default"].string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.6.19",
+  "version": "1.6.20",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,