From c0b0cc9f7ecd0bc3d63b2d9fcc4180ac8c4c2cc9 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq>
Date: Fri, 16 May 2025 18:17:07 +0800
Subject: [PATCH] feat: improve iframe loading state management and enhance
 styling in AutoProbeResultsContainer

---
 .../autoprobe/AutoProbeResultsContainer.vue   | 41 +++++++++++++++----
 .../tabs/AutoProbeDetailTabPatterns.vue       |  3 ++
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsContainer.vue b/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsContainer.vue
index 65301ed8..f2aeafd1 100644
--- a/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsContainer.vue
+++ b/frontend/crawlab-ui/src/components/core/autoprobe/AutoProbeResultsContainer.vue
@@ -18,10 +18,10 @@ const props = defineProps<{
 // Refs
 const resultsContainerRef = ref<HTMLElement | null>(null);
 const iframeRef = ref<HTMLIFrameElement | null>(null);
+const iframeLoading = ref(true);
 
 // States
 const activeTabName = ref<string | undefined>(TAB_NAME_RESULTS);
-
 const resultsVisible = ref(true);
 
 const resultsTabItems = computed<NavItem[]>(() => [
@@ -85,6 +85,11 @@ const onTabSelect = (id: string) => {
   if (!resultsVisible.value) {
     resultsVisible.value = true;
   }
+
+  // Reset iframe loading state when switching to preview tab
+  if (id === TAB_NAME_PREVIEW) {
+    iframeLoading.value = true;
+  }
 };
 
 const toggleResults = () => {
@@ -94,6 +99,10 @@ const toggleResults = () => {
   }
 };
 
+const onIframeLoad = () => {
+  iframeLoading.value = false;
+};
+
 // Resize handler
 const heightKey = 'autoprobe.results.containerHeight';
 const onSizeChange = (size: number) => {
@@ -154,12 +163,16 @@ defineOptions({ name: 'ClAutoProbeResultsContainer' });
       />
     </div>
     <div class="preview" v-else-if="activeTabName === TAB_NAME_PREVIEW">
-      <iframe
-        v-if="url"
-        ref="iframeRef"
-        :src="url"
-        sandbox="allow-scripts allow-same-origin allow-pointer-lock allow-downloads allow-modals allow-presentation"
-      />
+      <el-skeleton :rows="15" animated v-if="iframeLoading && url" />
+      <div class="iframe-container">
+        <iframe
+          v-if="url"
+          ref="iframeRef"
+          :src="url"
+          sandbox="allow-scripts allow-same-origin"
+          @load="onIframeLoad"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -223,10 +236,20 @@ defineOptions({ name: 'ClAutoProbeResultsContainer' });
     overflow: hidden;
     height: calc(100% - 41px);
 
-    iframe {
+    .el-skeleton {
+      padding: 20px;
+    }
+
+    .iframe-container {
+      position: relative;
       width: 100%;
       height: 100%;
-      border: none;
+
+      iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+      }
     }
   }
 }
diff --git a/frontend/crawlab-ui/src/views/autoprobe/detail/tabs/AutoProbeDetailTabPatterns.vue b/frontend/crawlab-ui/src/views/autoprobe/detail/tabs/AutoProbeDetailTabPatterns.vue
index 8af5b913..96072766 100644
--- a/frontend/crawlab-ui/src/views/autoprobe/detail/tabs/AutoProbeDetailTabPatterns.vue
+++ b/frontend/crawlab-ui/src/views/autoprobe/detail/tabs/AutoProbeDetailTabPatterns.vue
@@ -199,6 +199,9 @@ watch(
   () => state.form,
   () => {
     treeItems.value = cloneDeep(computedTreeItems.value);
+    if (!activeNavItem.value) {
+      activeNavItem.value = treeItems.value[0];
+    }
   },
   { immediate: true }
 );