perf: Improve the global loading display

apps/antd-view/src/main.ts

@@ -17,7 +17,38 @@ async function initApplication() {
     overrides: overridesPreferences,
   });
 
-  import('./bootstrap').then((m) => m.bootstrap(namespace));
+  // 启动应用并挂载
+  // vue应用主要逻辑及视图
+  const { bootstrap } = await import('./bootstrap');
+  await bootstrap(namespace);
+
+  // 移除并销毁loading
+  destoryAppLoading();
+}
+
+/**
+ * 移除并销毁loading
+ * 放在这里是而不是放在 index.html 的app标签内，主要是因为这样比较不会生硬，渲染过快可能会有闪烁
+ * 通过先添加css动画隐藏，在动画结束后在移除loading节点来改善体验
+ */
+function destoryAppLoading() {
+  // 全局搜索文件 loading.html, 找到对应的节点
+  const loadingElement = document.querySelector('#__app-loading__');
+  if (loadingElement) {
+    loadingElement.classList.add('hidden');
+    const injectLoadingElements = document.querySelectorAll(
+      '[data-app-loading^="inject"]',
+    );
+    // 过渡动画结束后移除loading节点
+    loadingElement.addEventListener(
+      'transitionend',
+      () => {
+        loadingElement.remove();
+        injectLoadingElements.forEach((el) => el?.remove());
+      },
+      { once: true },
+    );
+  }
 }
 
 initApplication();

apps/antd-view/vite.config.mts

@@ -1,7 +1,7 @@
 import { defineConfig } from '@vben/vite-config';
 
 export default defineConfig({
-  appcation: {
+  application: {
     compress: false,
     compressTypes: ['brotli', 'gzip'],
     importmap: false,