pref: 演示入口功能 loading优化

src/pages/bootpage/demonstration/index.js

@@ -9,7 +9,7 @@
  */
 import { FullscreenExitOutlined, FullscreenOutlined, RightOutlined } from '@ant-design/icons';
 import exitImg from '@/assets/images/demonstration/退出.png';
-import { Button, Spin, message, Tooltip } from 'antd';
+import { Button, Spin, message, Progress } from 'antd';
 import React, { useMemo, useState, useEffect, useRef } from 'react';
 import { cloneDeep, debounce } from 'lodash';
 import Cookies from 'js-cookie';
@@ -35,7 +35,12 @@ const Demonstration = props => {
   const showFullScreen = true;
   const videoRef = useRef(null);
   const [loginAction, setAction] = useState(() => new LoginAction(props));
+  const progressRef = useRef(0);
+  const timer = useRef(null);
+  const [progressValue, setProgressValue] = useState(0);
+
   const [loading, setLoading] = useState(true);
+  const [showContent, setShowContent] = useState(false);
   const [jumpLoading, setJumpLoading] = useState(false);
   const [selectKey, setSelectKey] = useState('供水产品');
   const [boxSize, setBoxSize] = useState({
@@ -298,7 +303,28 @@ const Demonstration = props => {
   const handError = err => {
     setJumpLoading(false);
   };
-
+  useEffect(() => {
+    if (loading && !timer.current) {
+      timer.current = setInterval(() => {
+        if (progressRef.current < 80) {
+          progressRef.current += 20;
+          setProgressValue(progressRef.current);
+        } else {
+          setProgressValue(99);
+          timer.current && clearInterval(timer.current);
+          timer.current = null;
+        }
+      }, 100);
+    }
+    if (!loading) {
+      setProgressValue(100);
+      timer.current && clearInterval(timer.current);
+      timer.current = null;
+      setTimeout(() => {
+        setShowContent(true);
+      }, 0);
+    }
+  }, [loading]);
   useEffect(() => {
     const handleToggleIndustry = event => {
       props.history && props.history.push(`/?client=${props.global.client}`);
@@ -331,6 +357,17 @@ const Demonstration = props => {
           <div className={styles.jumpLoader} />
         </div>
       ) : null}
+      {loading || progressValue !== 100 ? (
+        <div className={styles.loadingWrap}>
+          <Progress
+            style={{ width: '30%' }}
+            trailColor="rgba(255,255,255,0.5)"
+            strokeColor="#1685FF"
+            percent={progressValue}
+            showInfo={false}
+          />
+        </div>
+      ) : null}
       {showFullScreen ? (
         <div className={styles.CV_exit} onClick={exit}>
           <Button type="text" style={{ color: '#fff', fontSize: '24px' }}>
@@ -359,12 +396,8 @@ const Demonstration = props => {
             <div className={styles.top_r_text}>- 引领中国智慧水务 -</div>
           </div>
         </div>
-        {loading ? (
-          <div className={styles.loadingWrap}>
-            <div className={styles.loader} />
-          </div>
-        ) : null}
-        {!loading ? (
+
+        {showContent ? (
           <>
             <div className={classNames(styles.row, 'animate__fadeInDown', 'animate__animated', 'duration-500ms')}>
               <div className={styles.row_l}>

src/pages/bootpage/demonstration/index.less

@@ -5,7 +5,7 @@
   width: 100%;
   overflow: hidden;
   display: flex;
-  background: url('@{imgSrc}/背景.png') no-repeat center center;
+  background:rgba(8, 33, 77, 1) url('@{imgSrc}/背景.png') no-repeat center center;
   background-size: 100% 100%;
   position: relative;
   font-size: 14px;
@@ -374,4 +374,17 @@
   100% {
     height: 4px
   }
+}
+
+.loadingWrap {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  bottom: 20%;
+  left: 50%;
+  z-index: 10;
+  transform: translateX(-50%);
 }
\ No newline at end of file