feat(internal-select-menu): loading

src/_internal/select-menu/src/SelectMenu.tsx

@@ -28,6 +28,7 @@ import { formatLength } from '../../../_utils'
 import { createKey } from '../../../_utils/cssr'
 import { useTheme } from '../../../_mixins'
 import type { ThemeProps } from '../../../_mixins'
+import NInternalLoading from '../../loading'
 import NSelectOption from './SelectOption'
 import NSelectGroupHeader from './SelectGroupHeader'
 import style from './styles/index.cssr'
@@ -85,6 +86,7 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
+    loading: Boolean,
     onScroll: Function as PropType<(e: Event) => void>,
     // deprecated
     onMenuToggleOption: Function as PropType<(value: SelectBaseOption) => void>
@@ -255,6 +257,8 @@ export default defineComponent({
           optionCheckColor,
           actionTextColor,
           optionColorPending,
+          loadingColor,
+          loadingSize,
           [createKey('optionFontSize', size)]: fontSize,
           [createKey('optionHeight', size)]: optionHeight,
           [createKey('optionPadding', size)]: optionPadding
@@ -278,7 +282,9 @@ export default defineComponent({
         '--option-text-color-disabled': optionTextColorDisabled,
         '--option-text-color-pressed': optionTextColorPressed,
         '--option-padding': optionPadding,
-        '--option-padding-left': getPadding(optionPadding, 'left')
+        '--option-padding-left': getPadding(optionPadding, 'left'),
+        '--loading-color': loadingColor,
+        '--loading-size': loadingSize
       }
     })
     return {
@@ -322,7 +328,11 @@ export default defineComponent({
         onKeyup={this.handleKeyUp}
         onMousedown={this.handleMouseDown}
       >
-        {!this.empty ? (
+        {this.loading ? (
+          <div class="n-base-select-menu__loading">
+            <NInternalLoading strokeWidth={20} />
+          </div>
+        ) : !this.empty ? (
           <NScrollbar
             ref="scrollbarRef"
             scrollable={this.scrollable}
@@ -404,7 +414,7 @@ export default defineComponent({
             }}
           </NScrollbar>
         ) : (
-          <div style="padding: 12px 20px; flex: 1;">
+          <div class="n-base-select-menu__empty">
             {renderSlot($slots, 'empty', undefined, () => [
               (<NEmpty />) as VNode
             ])}

src/_internal/select-menu/src/styles/index.cssr.ts

@@ -1,6 +1,8 @@
 import { c, cB, cE, cM, cNotM } from '../../../../_utils/cssr'
 import fadeInScaleUpTransition from '../../../../_styles/transitions/fade-in-scale-up'
 
+// --loading-color
+// --loading-size
 export default cB('base-select-menu', `
   outline: none;
   z-index: 0;
@@ -32,6 +34,16 @@ export default cB('base-select-menu', `
     position: relative;
     width: 100%;
   `),
+  cE('loading, empty', `
+    display: flex;
+    padding: 12px 32px;
+    flex: 1;
+    justify-content: center;
+  `),
+  cE('loading', `
+    color: var(--loading-color);
+    font-size: var(--loading-size);
+  `),
   cE('action', `
     padding: 8px var(--option-padding-left);
     font-size: var(--option-font-size);

src/_internal/select-menu/styles/_common.ts

@@ -7,5 +7,6 @@ export default {
   optionPaddingSmall: '0 12px',
   optionPaddingMedium: '0 12px',
   optionPaddingLarge: '0 12px',
-  optionPaddingHuge: '0 12px'
+  optionPaddingHuge: '0 12px',
+  loadingSize: '18px'
 }

src/_internal/select-menu/styles/dark.ts

@@ -53,7 +53,8 @@ const internalSelectMenuDark: InternalSelectMenuTheme = {
       optionOpacityDisabled: opacityDisabled,
       optionCheckColor: primaryColor,
       optionColorPending: hoverColor,
-      actionTextColor: textColor2
+      actionTextColor: textColor2,
+      loadingColor: primaryColor
     }
   }
 }

src/_internal/select-menu/styles/light.ts

@@ -47,7 +47,8 @@ const self = (vars: ThemeCommonVars) => {
     optionOpacityDisabled: opacityDisabled,
     optionCheckColor: primaryColor,
     optionColorPending: hoverColor,
-    actionTextColor: textColor2
+    actionTextColor: textColor2,
+    loadingColor: primaryColor
   }
 }