feat: adds a short delay while waiting for logs to show (#3409)

Author: amir20

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 () => {

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>

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.",