From c31c41c726acae3ae30d8ab9a1fdad855a194b86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sun, 23 Jun 2024 18:16:58 +0200
Subject: [PATCH] feat(ui): add initializing explorer logic (#5941)

---
 .../client/components/explorer/Explorer.vue   | 10 ++++++++--
 .../client/composables/explorer/collector.ts  | 19 ++++++++++++++++---
 .../ui/client/composables/explorer/search.ts  |  4 ----
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/ui/client/components/explorer/Explorer.vue b/packages/ui/client/components/explorer/Explorer.vue
index 0514e6e8611e..76362df5102d 100644
--- 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
index 6794f229b634..a5adca3196d8 100644
--- 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
index e8a2b7d6d48f..7a086a2a5a02 100644
--- 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,