From c3f6ff9c563fc0d738a8e85d07436016218b6006 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 19 Nov 2024 12:01:03 -0800
Subject: [PATCH] feat: adds a short delay while waiting for logs to show
 (#3409)

---
 .../components/LogViewer/EventSource.spec.ts  |  2 +-
 assets/components/LogViewer/EventSource.vue   | 11 +++++++--
 .../__snapshots__/EventSource.spec.ts.snap    | 23 -------------------
 3 files changed, 10 insertions(+), 26 deletions(-)

diff --git a/assets/components/LogViewer/EventSource.spec.ts b/assets/components/LogViewer/EventSource.spec.ts
index 52c7ee1b..9a1d9d24 100644
--- a/assets/components/LogViewer/EventSource.spec.ts
+++ b/assets/components/LogViewer/EventSource.spec.ts
@@ -103,7 +103,7 @@ describe("<ContainerEventSource />", () => {
 
   test("renders loading correctly", async () => {
     const wrapper = createLogEventSource();
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.find("ul.animate-pulse").exists()).toBe(true);
   });
 
   test("should connect to EventSource", async () => {
diff --git a/assets/components/LogViewer/EventSource.vue b/assets/components/LogViewer/EventSource.vue
index e22c68f8..2d7c2451 100644
--- a/assets/components/LogViewer/EventSource.vue
+++ b/assets/components/LogViewer/EventSource.vue
@@ -1,12 +1,13 @@
 <template>
   <InfiniteLoader :onLoadMore="fetchMore" :enabled="!loadingMore && messages.length > 10" />
-  <ul role="status" class="flex animate-pulse flex-col gap-4 p-4" v-if="loading || noLogs">
-    <div class="flex flex-row gap-2" v-for="size in ['w-3/5', 'w-2/3', 'w-9/12', 'w-1/2']">
+  <ul class="flex animate-pulse flex-col gap-4 p-4" v-if="loading || (noLogs && waitingForMoreLog)">
+    <div class="flex flex-row gap-2" v-for="size in shuffle(['w-3/5', 'w-2/3', 'w-9/12', 'w-1/2', 'w-1/3', 'w-3/4'])">
       <div class="h-3 w-40 shrink-0 rounded-full bg-base-content/50 opacity-50"></div>
       <div class="h-3 rounded-full bg-base-content/50 opacity-50" :class="size"></div>
     </div>
     <span class="sr-only">Loading...</span>
   </ul>
+  <div v-else-if="noLogs && !waitingForMoreLog" class="p-4">Container has no logs yet</div>
   <slot :messages="messages" v-else></slot>
   <IndeterminateBar :color />
 </template>
@@ -29,6 +30,8 @@ const color = computed(() => {
 });
 
 const noLogs = computed(() => messages.value.length === 0);
+const waitingForMoreLog = refAutoReset(false, 3000);
+watchImmediate(loading, () => (waitingForMoreLog.value = true));
 
 defineExpose({
   clear: () => (messages.value = []),
@@ -41,4 +44,8 @@ const fetchMore = async () => {
     loadingMore.value = false;
   }
 };
+
+const shuffle = (items: any[]) => {
+  return items.sort(() => Math.random() - 0.5);
+};
 </script>
diff --git a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
index 9d65c971..4afebbac 100644
--- a/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
+++ b/assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap
@@ -60,29 +60,6 @@ exports[`<ContainerEventSource /> > render html correctly > should render messag
 </ul>"
 `;
 
-exports[`<ContainerEventSource /> > renders loading correctly 1`] = `
-"<div class="flex min-h-[1px] justify-center"><span class="loading loading-bars loading-md mt-4 text-primary" style="display: none;"></span></div>
-<ul role="status" class="flex animate-pulse flex-col gap-4 p-4">
-  <div class="flex flex-row gap-2">
-    <div class="h-3 w-40 shrink-0 rounded-full bg-base-content/50 opacity-50"></div>
-    <div class="h-3 rounded-full bg-base-content/50 opacity-50 w-3/5"></div>
-  </div>
-  <div class="flex flex-row gap-2">
-    <div class="h-3 w-40 shrink-0 rounded-full bg-base-content/50 opacity-50"></div>
-    <div class="h-3 rounded-full bg-base-content/50 opacity-50 w-2/3"></div>
-  </div>
-  <div class="flex flex-row gap-2">
-    <div class="h-3 w-40 shrink-0 rounded-full bg-base-content/50 opacity-50"></div>
-    <div class="h-3 rounded-full bg-base-content/50 opacity-50 w-9/12"></div>
-  </div>
-  <div class="flex flex-row gap-2">
-    <div class="h-3 w-40 shrink-0 rounded-full bg-base-content/50 opacity-50"></div>
-    <div class="h-3 rounded-full bg-base-content/50 opacity-50 w-1/2"></div>
-  </div><span class="sr-only">Loading...</span>
-</ul>
-<div data-v-2dbf2928="" class="animate-background h-1 w-1/2 bg-gradient-radial to-transparent to-75% from-secondary"></div>"
-`;
-
 exports[`<ContainerEventSource /> > should parse messages 1`] = `
 SimpleLogEntry {
   "_message": "This is a message.",