feat(ui): add initializing explorer logic (#5941)

userquin · web-flow · commit c31c41c726ac · 2024-06-23T18:16:58.000+02:00
diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
@@ -121,7 +121,7 @@ useResizeObserver(testExplorerRef, (entries) => {
     </div>
     <div class="scrolls" flex-auto py-1 @scroll.passive="hideAllPoppers">
       <DetailsPanel>
-        <template #summary>
+        <template v-if="initialized" #summary>
           <div grid="~ items-center gap-x-1 cols-[auto_min-content_auto] rows-[min-content_min-content]">
             <span text-red5>
               FAIL ({{ testsTotal.failed }})
@@ -141,7 +141,7 @@ useResizeObserver(testExplorerRef, (entries) => {
         </template>
         <!-- empty-state -->
         <template v-if="(isFiltered || isFilteredByStatus) && uiEntries.length === 0">
-          <div v-show="initialized" flex="~ col" items-center p="x4 y4" font-light>
+          <div v-if="initialized" flex="~ col" items-center p="x4 y4" font-light>
             <div op30>
               No matched test
             </div>
@@ -186,6 +186,12 @@ useResizeObserver(testExplorerRef, (entries) => {
               Clear All
             </button>
           </div>
+          <div v-else flex="~ col" items-center p="x4 y4" font-light>
+            <div class="i-carbon:circle-dash animate-spin" />
+            <div op30>
+              Loading...
+            </div>
+          </div>
         </template>
         <template v-else>
           <RecycleScroller
diff --git a/packages/ui/client/composables/explorer/collector.ts b/packages/ui/client/composables/explorer/collector.ts
@@ -13,7 +13,13 @@ import {
   isRunningTestNode,
 } from '~/composables/explorer/utils'
 import { isSuite } from '~/utils/task'
-import { openedTreeItems, treeFilter, uiEntries, uiFiles } from '~/composables/explorer/state'
+import {
+  initialized,
+  openedTreeItems,
+  treeFilter,
+  uiEntries,
+  uiFiles,
+} from '~/composables/explorer/state'
 import { explorerTree } from '~/composables/explorer/index'
 import { expandNodesOnEndRun } from '~/composables/explorer/expand'
 
@@ -161,8 +167,6 @@ function doRunFilter(
   filter: Filter,
   end = false,
 ) {
-  // refresh explorer
-
   const expandAll = treeFilter.value.expandAll
   const resetExpandAll = expandAll !== true
   const ids = new Set(openedTreeItems.value)
@@ -173,6 +177,15 @@ function doRunFilter(
     refreshExplorer(search, filter, end)
   })
 
+  // initialize the explorer
+  if (!initialized.value) {
+    queueMicrotask(() => {
+      if (uiEntries.value.length || end) {
+        initialized.value = true
+      }
+    })
+  }
+
   if (applyExpandNodes) {
     // expand all nodes
     queueMicrotask(() => {
diff --git a/packages/ui/client/composables/explorer/search.ts b/packages/ui/client/composables/explorer/search.ts
@@ -85,10 +85,6 @@ export function useSearch(searchBox: Ref<HTMLDivElement | undefined>) {
     }
   }, { flush: 'post' })
 
-  onMounted(() => {
-    nextTick(() => (initialized.value = true))
-  })
-
   return {
     initialized,
     filter,
