From 983300acf43786682d2d734b4b8809b06420671b Mon Sep 17 00:00:00 2001
From: Dream Hunter <dreamhunter2333@gmail.com>
Date: Thu, 27 Feb 2025 00:36:13 +0800
Subject: [PATCH] feat: |UI| add loading for lazy load component (#597)

---
 frontend/src/views/Admin.vue  | 7 ++++++-
 frontend/src/views/Header.vue | 4 ++++
 frontend/src/views/Index.vue  | 9 +++++++--
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Admin.vue b/frontend/src/views/Admin.vue
index e97c61cb..9536b56a 100644
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -23,7 +23,6 @@ import Telegram from './admin/Telegram.vue';
 import Webhook from './admin/Webhook.vue';
 import MailWebhook from './admin/MailWebhook.vue';
 import WorkerConfig from './admin/WorkerConfig.vue';
-import SendMail from './admin/SendMail.vue';
 
 const {
   adminAuth, showAdminAuth, adminTab, loading,
@@ -31,6 +30,12 @@ const {
 } = useGlobalState()
 const message = useMessage()
 
+const SendMail = defineAsyncComponent(() => {
+  loading.value = true;
+  return import('./admin/SendMail.vue')
+    .finally(() => loading.value = false);
+});
+
 const authFunc = async () => {
   try {
     adminAuth.value = tmpAdminAuth.value;
diff --git a/frontend/src/views/Header.vue b/frontend/src/views/Header.vue
index 3a3e10cb..489b6353 100644
--- a/frontend/src/views/Header.vue
+++ b/frontend/src/views/Header.vue
@@ -126,7 +126,9 @@ const menuOptions = computed(() => [
                 type: menuValue.value == "admin" ? "primary" : "default",
                 style: "width: 100%",
                 onClick: async () => {
+                    loading.value = true;
                     await router.push(getRouterPathWithLang('/admin', locale.value));
+                    loading.value = false;
                     showMobileMenu.value = false;
                 }
             },
@@ -214,7 +216,9 @@ const logoClick = async () => {
     if (logoClickCount.value >= 5) {
         logoClickCount.value = 0;
         message.info("Change to admin Page");
+        loading.value = true;
         await router.push(getRouterPathWithLang('/admin', locale.value));
+        loading.value = false;
     } else {
         logoClickCount.value++;
     }
diff --git a/frontend/src/views/Index.vue b/frontend/src/views/Index.vue
index 80ddca01..cf384547 100644
--- a/frontend/src/views/Index.vue
+++ b/frontend/src/views/Index.vue
@@ -15,11 +15,16 @@ import Webhook from './index/Webhook.vue';
 import Attachment from './index/Attachment.vue';
 import About from './common/About.vue';
 
-const SendMail = defineAsyncComponent(() => import('./index/SendMail.vue'));
-const { settings, openSettings, indexTab, globalTabplacement } = useGlobalState()
+const { loading, settings, openSettings, indexTab, globalTabplacement } = useGlobalState()
 const message = useMessage()
 const route = useRoute()
 
+const SendMail = defineAsyncComponent(() => {
+  loading.value = true;
+  return import('./index/SendMail.vue')
+    .finally(() => loading.value = false);
+});
+
 const { t } = useI18n({
   messages: {
     en: {