feat: adds a simple loader when waiting for logs (#2984)

assets/components/LogViewer/EventSource.spec.ts

@@ -95,7 +95,7 @@ describe("<ContainerEventSource />", () => {
 
   const sourceUrl = "/api/hosts/localhost/containers/abc/logs/stream?stdout=1&stderr=1";
 
-  test("renders correctly", async () => {
+  test("renders loading correctly", async () => {
     const wrapper = createLogEventSource();
     expect(wrapper.html()).toMatchSnapshot();
   });

assets/components/LogViewer/LogList.vue

@@ -1,5 +1,9 @@
 <template>
-  <ul class="events group py-4" :class="{ 'disable-wrap': !softWrap, [size]: true, compact }">
+  <ul
+    class="events group py-4"
+    :class="{ 'disable-wrap': !softWrap, [size]: true, compact }"
+    v-if="messages.length > 0"
+  >
     <li
       v-for="item in messages"
       :key="item.id"
@@ -15,6 +19,9 @@
       />
     </li>
   </ul>
+  <div v-else class="m-4 text-center">
+    <span class="loading loading-ring loading-md text-primary"></span>
+  </div>
 </template>
 
 <script lang="ts" setup>

assets/components/LogViewer/__snapshots__/EventSource.spec.ts.snap

@@ -102,9 +102,9 @@ exports[`<ContainerEventSource /> > render html correctly > should render messag
 </ul>"
 `;
 
-exports[`<ContainerEventSource /> > renders correctly 1`] = `
+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 data-v-cf9ff940="" class="events group py-4 medium"></ul>"
+<div data-v-cf9ff940="" class="m-4 text-center"><span data-v-cf9ff940="" class="loading loading-ring loading-md text-primary"></span></div>"
 `;
 
 exports[`<ContainerEventSource /> > should parse messages 1`] = `