feat: |UI| add loading for lazy load component (#597)

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;

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++;
     }

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 { loading, settings, openSettings, indexTab, globalTabplacement } = useGlobalState()
-const { 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: {