From 2dc6da82a986200b3a5709a350d46c3c143e04e5 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 18 Dec 2025 16:53:24 +0800
Subject: [PATCH] fix: Add loading prompt for embedded page #622

---
 frontend/src/views/embedded/page.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/embedded/page.vue b/frontend/src/views/embedded/page.vue
index e8ab6f8e..78c26fd5 100644
--- a/frontend/src/views/embedded/page.vue
+++ b/frontend/src/views/embedded/page.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :class="dynamicType === 4 ? 'sqlbot--embedded-page' : 'sqlbot-embedded-assistant-page'">
+  <div
+    v-loading="divLoading"
+    :class="dynamicType === 4 ? 'sqlbot--embedded-page' : 'sqlbot-embedded-assistant-page'"
+  >
     <chat-component
       v-if="!loading"
       ref="chatRef"
@@ -13,7 +16,7 @@
 </template>
 <script setup lang="ts">
 import ChatComponent from '@/views/chat/index.vue'
-import { nextTick, onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'
+import { nextTick, onBeforeMount, onBeforeUnmount, reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { assistantApi } from '@/api/assistant'
 import { useAssistantStore } from '@/stores/assistant'
@@ -47,6 +50,7 @@ const validator = ref({
   token: '',
 })
 const loading = ref(true)
+const divLoading = ref(true)
 const eventName = 'sqlbot_embedded_event'
 const communicationCb = async (event: any) => {
   if (event.data?.eventName === eventName) {
@@ -80,6 +84,17 @@ const communicationCb = async (event: any) => {
     }
   }
 }
+
+watch(
+  () => loading.value,
+  (val) => {
+    nextTick(() => {
+      setTimeout(() => {
+        divLoading.value = val
+      }, 1000)
+    })
+  }
+)
 const createChat = () => {
   chatRef.value?.createNewChat()
 }