feat: improves the loader for logs (#3404)

assets/composable/eventStreams.ts

@@ -53,6 +53,8 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
   const messages: ShallowRef<LogEntry<string | JSONObject>[]> = shallowRef([]);
   const buffer: ShallowRef<LogEntry<string | JSONObject>[]> = shallowRef([]);
   const opened = ref(false);
+  const loading = ref(true);
+  const error = ref(false);
   const { paused: scrollingPaused } = useScrollContext();
 
   function flushNow() {
@@ -124,6 +126,8 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
     close();
     if (clear) clearMessages();
     opened.value = false;
+    loading.value = true;
+    error.value = false;
     es = new EventSource(urlWithParams.value);
     es.addEventListener("container-event", (e) => {
       const event = JSON.parse((e as MessageEvent).data) as { actorId: string; name: string };
@@ -151,9 +155,13 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
         flushBuffer();
       }
     };
-    es.onerror = () => clearMessages();
+    es.onerror = () => {
+      error.value = true;
+    };
     es.onopen = () => {
+      loading.value = false;
       opened.value = true;
+      error.value = false;
     };
   }
 
@@ -210,5 +218,5 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
     }
   });
 
-  return { messages, loadOlderLogs, isLoadingMore, hasComplexLogs, opened };
+  return { messages, loadOlderLogs, isLoadingMore, hasComplexLogs, opened, error, loading };
 }