Merge pull request #627 from allwaysLove/fix_server_list_info_empty_bug

fix: 修复主机列表选择模态框，在没有拉到主机列表数据前加载页面，导致页面显示异常的问题  Closes 583

spug_web/src/pages/deploy/request/HostSelector.js

@@ -1,14 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import { observer } from 'mobx-react';
-import { Modal, Table, Button, Alert } from 'antd';
+import {Modal, Table, Button, Alert, Spin, Space} from 'antd';
 import hostStore from 'pages/host/store';
 import lds from 'lodash';
 
 export default observer(function (props) {
   const [selectedRowKeys, setSelectedRowKeys] = useState(props.host_ids || []);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    hostStore.initial()
+    // 增加异步逻辑，以修复页面在初次载入时主机列表弹框看不到主机信息的问题
+    hostStore.initial().then(() => {
+      // 异步执行完后，去除 loading 状态
+      setIsLoading(false)
+    })
   }, [])
 
   function handleClickRow(record) {
@@ -32,6 +37,26 @@ export default observer(function (props) {
     }
   }
 
+  // 若主机列表数据未加载完成，则返回 loading 状态
+  if (isLoading) {
+    return (
+        <Modal
+            visible
+            width={600}
+            title='可选主机列表'
+            onOk={handleSubmit}
+            onCancel={props.onCancel}>
+            <Space style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center'
+            }}>
+              <Spin spinning={isLoading} tip="加载中......" size="large"></Spin>
+            </Space>
+        </Modal>
+    )
+  }
+
   return (
     <Modal
       visible