[fix](fe-ui) fix home page spin bug apache#7170 (apache#7912)

The Spin(loading circle) will disappear after hardware info loaded

.gitignore

@@ -60,6 +60,7 @@ build
 ui/dist
 ui/node_modules
 ui/package-lock.json
+ui/yarn.lock
 docs/package-lock.json
 fe/fe-common/.classpath
 fe/.flattened-pom.xml

ui/public/locales/en-us.json

@@ -49,5 +49,6 @@
     "selectWarning": "Please select a table",
     "executionTime": "Execution Time",
     "search":"Search",
-    "executionFailed":"Execution failed"
+    "executionFailed":"Execution failed",
+    "loading":"loading"
 }

ui/public/locales/zh-cn.json

@@ -49,5 +49,6 @@
     "selectWarning": "请选择表",
     "executionTime": "执行时间",
     "search":"查询",
-    "executionFailed": "执行失败"
+    "executionFailed": "执行失败",
+    "loading":"加载中"
 }

ui/src/pages/home/index.tsx

@@ -6,76 +6,81 @@
  * to you under the Apache License, Version 2.0 (the
  * "License"); you may not use this file except in compliance
  * with the License.  You may obtain a copy of the License at
- * 
+ *
  *   http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  * KIND, either express or implied.  See the License for the
  * specific language governing permissions and limitations
  * under the License.
  */
-
- import React, {useState, useEffect} from 'react';
- import {Typography, Divider, BackTop, Spin} from 'antd';
- const {Title, Paragraph, Text} = Typography;
- import {getHardwareInfo} from 'Src/api/api';
-
- export default function Home(params: any) {
-     const [hardwareData , setHardwareData] = useState({});
-     const getConfigData = function(){
-         getHardwareInfo().then(res=>{
-             if (res && res.msg === 'success') {
-                 console.log(res.data)
-                 setHardwareData(res.data);
-             }
-         })
-             .catch(err=>{
-                 setHardwareData({
-                     VersionInfo:{},
-                     HardwareInfo:{},
-                 });
-             });
-     };
-     function getItems(data, flag){
-         let arr = [];
-         for (const i in data) {
-             if (flag) {
-                 const dt = data[i].replace(/\ /g, "")
-                 dt = dt.replace(/\<br>/g, "\n")
-                 arr.push(<p key={i} dangerouslySetInnerHTML={createMarkup(i,dt)} ></p>
-                 )
-             } else {
-                 const dt = data[i].replace(/\&nbsp;/g, "")
-                 dt = dt.replace(/\<br>/g, "\n")
-                 arr.push(<p key={i}>{i + ' : ' + dt}</p>
-                 )
-             }
-         }
-         return arr;
-     }
-     function createMarkup(key,data) {
-         return {__html:key + ' : ' + String(data)};
-     }
-     useEffect(() => {
-         getConfigData();
-     }, []);
-     return(
-         <Typography style={{padding:'30px'}}>
-             <Title>Version</Title>
-             <Paragraph style={{background: '#f9f9f9',padding: '20px'}}>
-                 {...getItems(hardwareData.VersionInfo, false)}
-             </Paragraph>
-             <Divider/>
-             <Title>Hardware Info</Title>
-             <Paragraph style={{background: '#f9f9f9',padding: '20px'}}>
-                 {...getItems(hardwareData.HardwareInfo, false)}
-             </Paragraph>
-             <BackTop></BackTop>
-             {hardwareData.HarewareInfo ?'':<Spin style={{'position':'relative','top':'50%','left':'50%'}}/>}
-         </Typography>
-     );
- }
+
+import React, {useState, useEffect} from 'react';
+import {Typography, Divider, BackTop, Spin} from 'antd';
+import {useTranslation} from "react-i18next";
+
+const {Title, Paragraph} = Typography;
+import {getHardwareInfo} from 'Src/api/api';
+
+export default function Home(params: any) {
+    const {t} = useTranslation();
+    const [hardwareData, setHardwareData] = useState({});
+    const [hardwareDataLoading, setHardwareDataLoading] = useState(true);
+    const getConfigData = function () {
+        getHardwareInfo().then(res => {
+            if (res && res.msg === 'success') {
+                setHardwareData(res.data);
+                setHardwareDataLoading(false);
+            }
+        }).catch(err => {
+            console.error(err)
+            setHardwareData({VersionInfo: {}, HardwareInfo: {}});
+        });
+    };
+
+    function getItems(data, flag) {
+        const arr: any[] = [];
+        for (const i in data) {
+            let dt = data[i].replace(/&nbsp;/g, "")
+            dt = dt.replace(/<br>/g, "\n")
+            if (flag) {
+                arr.push(<p key={i} dangerouslySetInnerHTML={createMarkup(i, dt)}/>)
+            } else {
+                arr.push(<p key={i}>{i + ' : ' + dt}</p>)
+            }
+        }
+        return arr;
+    }
+
+    function createMarkup(key, data) {
+        return {__html: key + ' : ' + String(data)};
+    }
+
+    useEffect(() => {
+        getConfigData();
+    }, []);
+    return (
+        <div>
+            <Typography style={{padding: '30px'}}>
+                <Title>Version</Title>
+                <Spin spinning={hardwareDataLoading} tip={t('loading') + '...'}>
+                    <Paragraph style={{background: '#f9f9f9', padding: '20px'}}>
+                        {...getItems(hardwareData.VersionInfo, false)}
+                    </Paragraph>
+                </Spin>
+                <Divider/>
+                <Title>Hardware Info</Title>
+                <Spin spinning={hardwareDataLoading} tip={t('loading') + '...'}>
+                    <Paragraph style={{background: '#f9f9f9', padding: '20px'}}>
+                        {...getItems(hardwareData.HardwareInfo, false)}
+                    </Paragraph>
+                </Spin>
+            </Typography>
+            <BackTop></BackTop>
+        </div>
+    );
+}