fix(comp:select): loading get the first execution

IDuxFE · Feb 9, 2023 · 1afd8b1 · 1afd8b1
1 parent 8849999
commit 1afd8b1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 17 deletions.
diff --git a/packages/components/select/demo/Loading.vue b/packages/components/select/demo/Loading.vue
@@ -9,9 +9,9 @@ import { ref } from 'vue'
 
 import { SelectData } from '@idux/components/select'
 
-const dataSource = ref<SelectData[]>([])
+const dataSource = ref<SelectData[]>([{ label: 'Tom', value: 'tom' }])
 
-const value = ref('')
+const value = ref('tom')
 const isLoading = ref(false)
 
 const timer = ref<number | null>(null)
@@ -24,17 +24,15 @@ const onLoad = () => {
   }
   timer.value = setTimeout(() => {
     isLoading.value = false
-    dataSource.value.push({ label: 'Tom', value: 'tom' })
     dataSource.value.push({ label: 'Jack', value: 'jack' })
     dataSource.value.push({ label: 'Alan', value: 'alan' })
-  }, 5000)
+  }, 3000)
 }
 
 function clear() {
   isLoading.value = true
-  value.value = ''
-  if (dataSource.value.length > 0) {
-    dataSource.value.length = 0
+  if (dataSource.value.length > 1) {
+    dataSource.value.length = 1
   }
 }
 </script>
diff --git a/packages/components/select/src/panel/Panel.tsx b/packages/components/select/src/panel/Panel.tsx
@@ -85,7 +85,13 @@ export default defineComponent({
       const children = [<ListBox />]
       const loading = props.loading
 
-      if (options.length > 0) {
+      if (loading) {
+        children.push(
+          <div class={`${common.prefixCls}-select-loading`}>
+            <IxSpin spinning={loading}></IxSpin>
+          </div>,
+        )
+      } else if (options.length > 0) {
         const itemRender: VirtualItemRenderFn<FlattenedOption> = ({ item, index }) => {
           const { type, ...rest } = item
           return type === 'group' ? <OptionGroup index={index} {...rest} /> : <Option index={index} {...rest} />
@@ -106,15 +112,7 @@ export default defineComponent({
           />,
         )
       } else {
-        if (loading) {
-          children.push(
-            <div class={`${common.prefixCls}-select-loading`}>
-              <IxSpin spinning={loading}></IxSpin>
-            </div>,
-          )
-        } else {
-          children.push(<ɵEmpty v-slots={slots} empty={props.empty} />)
-        }
+        children.push(<ɵEmpty v-slots={slots} empty={props.empty} />)
       }
 
       return <div onMousedown={handlePanelMouseDown}>{children}</div>