chore: useUserPrefernces function from dashboard

Author: shivani170

src/Shared/Components/ReactSelect/constants.tsx

@@ -190,12 +190,21 @@ export const AppSelectorDropdownIndicator = (props: DropdownIndicatorProps) => {
     )
 }
 
-export const AppSelectorNoOptionsMessage = (
-    inputObj: { inputValue: string },
-    hideCharacterResultInfo?: boolean,
-): string => {
-    if (inputObj && (inputObj.inputValue === '' || inputObj.inputValue.length < 3) && !hideCharacterResultInfo) {
+/**
+ *
+ * @returns {string}
+ * @description Returns the no matching result text for the select component.
+ */
+export const getNoMatchingResultText = () => NO_MATCHING_RESULT
+
+/**
+ * @param inputObj
+ * @returns {string}
+ * @description Returns the no options message for the select component.
+ */
+export const AppSelectorNoOptionsMessage = (inputObj: { inputValue: string }): string => {
+    if (inputObj && (inputObj.inputValue === '' || inputObj.inputValue.length < 3)) {
         return TYPE_3_CHARACTERS_TO_SEE_MATCHING_RESULTS
     }
-    return NO_MATCHING_RESULT
+    return getNoMatchingResultText()
 }

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

@@ -221,6 +221,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     borderRadiusConfig,
     labelTippyCustomizedConfig,
     labelTooltipConfig,
+    shouldShowLoadingMessage = false,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const innerRef = useRef<SelectPickerProps<OptionValue, IsMulti>['selectRef']['current']>(null)
@@ -331,6 +332,13 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
         return null
     }
 
+    const renderLoadingMessage = () => {
+        if (shouldShowLoadingMessage) {
+            return <p className="m-0 cn-7 fs-13 fw-4 lh-20 py-6 px-8">Loading...</p>
+        }
+        return null
+    }
+
     const renderDisabledTippy = (children: ReactElement) => (
         <Tippy content={disabledTippyContent} placement="top" className="default-tt" arrow={false}>
             {children}
@@ -454,6 +462,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                             MultiValueRemove: SelectPickerMultiValueRemove,
                             GroupHeading: renderGroupHeading,
                             NoOptionsMessage: renderNoOptionsMessage,
+                            LoadingMessage: renderLoadingMessage,
                             Input: SelectPickerInput,
                             ...(shouldHideMenu && {
                                 Menu: () => null,

src/Shared/Components/SelectPicker/common.tsx

@@ -74,7 +74,11 @@ export const SelectPickerDropdownIndicator = <OptionValue,>(
 
     return (
         <components.DropdownIndicator {...props}>
-            {isLoading ? <Progressing /> : <ICCaretDown className={isDisabled ? 'scn-3' : 'scn-6'} />}
+            {isLoading ? (
+                <Progressing fillColor="var(--N500)" />
+            ) : (
+                <ICCaretDown className={isDisabled ? 'scn-3' : 'scn-6'} />
+            )}
         </components.DropdownIndicator>
     )
 }

src/Shared/Components/SelectPicker/type.ts

@@ -277,6 +277,12 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
          * @default true
          */
         shouldShowNoOptionsMessage?: boolean
+        /**
+         * If true, the loading message is shown when loading
+         *
+         * @default false
+         */
+        shouldShowLoadingMessage?: boolean
         /**
          * If true, the menu list and the dropdown indicator are hidden. Suitable for use cases like multi-inputs
          *