perf: Improve the global loading display

internal/vite-config/src/plugins/inject-app-loading/loading.html

@@ -1,4 +1,4 @@
-<style>
+<style data-app-loading="inject-css">
   html {
     /* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
     line-height: 1.15;
@@ -8,6 +8,7 @@
     position: fixed;
     top: 0;
     left: 0;
+    z-index: 9999;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -15,6 +16,14 @@
     width: 100%;
     height: 100%;
     background-color: #f4f7f9;
+
+    /* transition: all 0.8s ease-out; */
+  }
+
+  .loading.hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: all 1s ease-out;
   }
 
   .dark .loading {
@@ -96,7 +105,7 @@
     }
   }
 </style>
-<div class="loading">
+<div class="loading" id="__app-loading__">
   <div class="loader"></div>
   <div class="title"><%= VITE_GLOB_APP_TITLE %></div>
 </div>