feat: beautify loading (#5947)

public/pro_icon.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M259.119,233.588c0-3.644,0.041-7.289-0.008-10.932
+	c-0.111-8.558-4.697-13.308-13.231-13.486c-6.658-0.139-13.326,0.12-19.98-0.096c-3.292-0.107-4.247,0.995-4.24,4.266
+	c0.094,44.794,0.101,89.589-0.008,134.383c-0.009,3.492,1.346,4.154,4.407,4.113c9.99-0.135,19.985-0.18,29.972,0.019
+	c3.52,0.069,4.561-1.136,4.534-4.575c-0.138-16.817-0.124-33.637-0.037-50.455c0.053-10.153-0.512-20.322,0.426-30.457
+	c1.339-14.5,10.473-23.758,24.802-25.619c4.382-0.569,8.652-0.143,12.92,0.505c4.367,0.663,6.274-1.139,6.266-5.396
+	c-0.015-7.494-0.048-14.987,0.015-22.48c0.029-3.358-1.322-5.272-4.784-5.789c-13.2-1.97-24.368,1.438-32.905,12.103
+	C263.914,223.876,262.08,228.86,259.119,233.588z"/>
+<g>
+	<defs>
+		<path id="SVGID_1_" d="M56.964,256.003c0-30.332,0.092-60.665-0.105-90.996c-0.028-4.252,1.185-5.176,5.265-5.141
+			c25.497,0.221,51.007-0.295,76.491,0.323c20.853,0.505,39.051,8.125,50.951,25.966c14.972,22.448,16.14,46.757,4.473,70.786
+			c-11.114,22.892-31.459,32.606-56.012,33.989c-12.13,0.683-24.326,0.327-36.489,0.176c-3.462-0.043-4.55,0.903-4.514,4.451
+			c0.174,17.164-0.026,34.333,0.161,51.496c0.04,3.676-0.859,4.918-4.695,4.82c-10.326-0.262-20.668-0.277-30.994,0.006
+			c-3.947,0.109-4.622-1.318-4.606-4.882C57.021,316.668,56.964,286.335,56.964,256.003z M115.378,191.878
+			c-4.832,0-9.666,0.105-14.493-0.042c-2.639-0.08-3.862,0.506-3.844,3.544c0.121,20.324,0.09,40.65,0.026,60.975
+			c-0.007,2.423,0.494,3.632,3.281,3.58c9.16-0.174,18.349,0.301,27.481-0.248c20.562-1.234,31.673-12.484,32.665-32.392
+			c0.974-19.536-9.987-32.905-29.141-35.031C126.09,191.681,115.378,191.978,115.378,191.878z"/>
+	</defs>
+	<use xlink:href="#SVGID_1_"  overflow="visible" fill-rule="evenodd" clip-rule="evenodd"/>
+	<clipPath id="SVGID_2_">
+		<use xlink:href="#SVGID_1_"  overflow="visible"/>
+	</clipPath>
+	<path clip-path="url(#SVGID_2_)" fill-rule="evenodd" clip-rule="evenodd" d="M56.964,256.003c0,30.332,0.056,60.665-0.075,90.996
+		c-0.016,3.563,0.659,4.991,4.606,4.882c10.325-0.283,20.667-0.268,30.994-0.006c3.836,0.098,4.735-1.145,4.695-4.82
+		c-0.188-17.163,0.013-34.332-0.161-51.496c-0.036-3.548,1.052-4.494,4.514-4.451c12.163,0.151,24.359,0.507,36.489-0.176
+		c24.552-1.383,44.897-11.097,56.012-33.989c11.667-24.029,10.5-48.338-4.473-70.786c-11.9-17.841-30.098-25.461-50.951-25.966
+		c-25.484-0.618-50.995-0.103-76.491-0.323c-4.08-0.035-5.292,0.889-5.265,5.141C57.056,195.339,56.964,225.671,56.964,256.003z"/>
+</g>
+<g>
+	<defs>
+		<path id="SVGID_3_" d="M315.446,281.626c0.099-19.011,3.621-36.469,15.474-51.155c15.867-19.659,37.477-25.831,61.573-23.923
+			c38.108,3.018,61.858,28.28,63.712,66.526c0.692,14.277-0.41,28.252-5.881,41.65c-7.521,18.418-20.696,30.726-39.764,36.411
+			c-18.27,5.447-36.605,5.267-54.348-1.839c-25.895-10.371-37.139-31.363-40.178-57.816
+			C315.637,288.012,315.61,284.501,315.446,281.626z M417.02,280.467c-0.092-9.835-1.27-19.53-5.888-28.481
+			c-5.233-10.144-13.333-15.962-25.039-16.006c-11.688-0.044-20.367,5.439-25.118,15.79c-8.715,18.984-8.698,38.444-0.095,57.46
+			c4.719,10.431,13.509,15.761,25.142,15.739c11.655-0.021,19.883-5.677,25.127-15.869
+			C415.757,300.142,416.912,290.442,417.02,280.467z"/>
+	</defs>
+	<use xlink:href="#SVGID_3_"  overflow="visible" fill-rule="evenodd" clip-rule="evenodd"/>
+	<clipPath id="SVGID_4_">
+		<use xlink:href="#SVGID_3_"  overflow="visible"/>
+	</clipPath>
+	<path clip-path="url(#SVGID_4_)" fill-rule="evenodd" clip-rule="evenodd" d="M315.446,281.626c0.164,2.875,0.19,6.386,0.589,9.854
+		c3.039,26.453,14.283,47.445,40.178,57.816c17.742,7.105,36.078,7.286,54.348,1.839c19.067-5.686,32.242-17.993,39.764-36.411
+		c5.471-13.398,6.573-27.373,5.881-41.65c-1.854-38.247-25.604-63.509-63.712-66.526c-24.097-1.908-45.706,4.264-61.573,23.923
+		C319.067,245.157,315.545,262.615,315.446,281.626z"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M259.119,233.588c2.961-4.728,4.795-9.712,8.146-13.899
+	c8.537-10.664,19.705-14.072,32.905-12.103c3.462,0.517,4.813,2.431,4.784,5.789c-0.063,7.493-0.029,14.987-0.015,22.48
+	c0.009,4.258-1.898,6.06-6.266,5.396c-4.268-0.648-8.538-1.074-12.92-0.505c-14.329,1.861-23.463,11.119-24.802,25.619
+	c-0.938,10.135-0.373,20.304-0.426,30.457c-0.087,16.818-0.101,33.638,0.037,50.455c0.027,3.439-1.014,4.645-4.534,4.575
+	c-9.987-0.198-19.982-0.153-29.972-0.019c-3.061,0.041-4.416-0.621-4.407-4.113c0.109-44.794,0.103-89.589,0.008-134.383
+	c-0.007-3.271,0.948-4.373,4.24-4.266c6.654,0.216,13.322-0.042,19.98,0.096c8.535,0.178,13.12,4.928,13.231,13.486
+	C259.16,226.3,259.119,229.944,259.119,233.588z"/>
+</svg>

src/pages/document.ejs

@@ -14,8 +14,20 @@
     <noscript>Out-of-the-box mid-stage front/design solution!</noscript>
     <div id="root">
       <style>
+        html,
+        body,
+        #root {
+          height: 100%;
+          margin: 0;
+          padding: 0;
+        }
+        #root {
+          background-image: url('/home_bg.png');
+          background-repeat: no-repeat;
+          background-size: 100% auto;
+        }
         .page-loading-warp {
-          padding: 120px;
+          padding: 98px;
           display: flex;
           justify-content: center;
           align-items: center;
@@ -155,12 +167,25 @@
           }
         }
       </style>
-      <div class="page-loading-warp">
-        <div class="ant-spin ant-spin-lg ant-spin-spinning">
-          <span class="ant-spin-dot ant-spin-dot-spin"
-            ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
-            ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
-          ></span>
+      <div
+        style="display: flex;justify-content: center;align-items: center;flex-direction: column;min-height: 420px;height: 100%;"
+      >
+        <img src="/pro_icon.svg" alt="logo" width="256" />
+        <div class="page-loading-warp">
+          <div class="ant-spin ant-spin-lg ant-spin-spinning">
+            <span class="ant-spin-dot ant-spin-dot-spin"
+              ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
+              ><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i
+            ></span>
+          </div>
+        </div>
+        <div style="display: flex;justify-content: center;align-items: center;">
+          <img
+            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+            width="32"
+            style="margin-right: 8px;"
+          />
+          Ant Design
         </div>
       </div>
     </div>