添加loading

src/forge/Information/Pages/newsDetail.jsx

@@ -1,5 +1,5 @@
 import React,{ useState , useEffect } from 'react';
-import { Breadcrumb , Divider } from 'antd';
+import { Breadcrumb , Divider, Spin } from 'antd';
 import liulan from '../img/liulan.png';
 import RenderHtml from '../../../components/render-html';
 import { Base64 } from 'js-base64';
@@ -12,6 +12,7 @@ function NewsDetail(props){
   const [ detail , setDetail ] = useState(undefined);
   const [ cmsDir , setCmsDir ] = useState(undefined);
   const [ content , setContent]=useState(undefined);
+  const [ isSpin , setIsSpin]=useState(false);
   const temp = props.temp
 
   useEffect(()=>{
@@ -22,44 +23,48 @@ function NewsDetail(props){
   },[id])
 
   function getDetails(){
+    setIsSpin(true)
     getNewsDetail(id).then(result=>{
       if(result){
         let data = result.data.data;
         setDetail(data);
         setCmsDir(data.cmsDir);
         setContent(Base64.decode(data.content));
+        setIsSpin(false)
       }
     }).catch(error=>{})
   }
   return(
     <div className="detail_news_all">
-      {
-        detail && 
-        <div style={{width:'1200px',margin:"0px auto",padding:"30px 0px"}}>
-          <Breadcrumb separator=">">
-            <Breadcrumb.Item href={`/zone/${deptId}/news`}>{tempConfig[temp].mainTitle}</Breadcrumb.Item>
-            { cmsDir && <Breadcrumb.Item href={`/zone/${deptId}/news/${cmsDir.id}`}>{cmsDir.name}</Breadcrumb.Item> }
-            <Breadcrumb.Item>正文</Breadcrumb.Item>
-          </Breadcrumb>
-          <div className="info_text">
-            <div className="info_text_main">
-              <p className="i_name">{detail.name}</p>
-              <ul className="i_ul_value">
-                { cmsDir && <li><a href={ detail.publishUserUrl } ><img src={ detail.publishUserImage } alt="" className="headimg" /> { detail.publishUser }</a></li> }
-                { cmsDir && <li>发布于{detail.publishTime}</li> }
-                { detail.visits && <li><img src={liulan} alt="" className="mr5" />{detail.visits}</li> }
-              </ul>
+      <Spin spinning={isSpin}>
+        {
+          detail && 
+          <div style={{width:'1200px',margin:"0px auto",padding:"30px 0px"}}>
+            <Breadcrumb separator=">">
+              <Breadcrumb.Item href={`/zone/${deptId}/news`}>{tempConfig[temp].mainTitle}</Breadcrumb.Item>
+              { cmsDir && <Breadcrumb.Item href={`/zone/${deptId}/news/${cmsDir.id}`}>{cmsDir.name}</Breadcrumb.Item> }
+              <Breadcrumb.Item>正文</Breadcrumb.Item>
+            </Breadcrumb>
+            <div className="info_text">
+              <div className="info_text_main">
+                <p className="i_name">{detail.name}</p>
+                <ul className="i_ul_value">
+                  { cmsDir && <li><a href={ detail.publishUserUrl } ><img src={ detail.publishUserImage } alt="" className="headimg" /> { detail.publishUser }</a></li> }
+                  { cmsDir && <li>发布于{detail.publishTime}</li> }
+                  { detail.visits && <li><img src={liulan} alt="" className="mr5" />{detail.visits}</li> }
+                </ul>
+              </div>
+              <Divider dashed={true}	/>
+              {
+                content ?
+                <RenderHtml className="informations_detail imageLayerParent" value={content} url={props.history.location} />
+                :
+                <span>暂无详情~</span>
+              }
             </div>
-            <Divider dashed={true}	/>
-            {
-              content ?
-              <RenderHtml className="informations_detail imageLayerParent" value={content} url={props.history.location} />
-              :
-              <span>暂无详情~</span>
-            }
           </div>
-        </div>
-      }
+        }
+      </Spin>
     </div>
   )
 }