fix: fetching more should only allow for one and abort if one is already in progress. fixes #3113 (#3118)

Author: amir20

assets/components/InfiniteLoader.vue

@@ -14,7 +14,6 @@ const isLoading = ref(false);
 const root = ref<HTMLElement>();
 
 const observer = new IntersectionObserver(async (entries) => {
-  // console.log(entries, entries[0].intersectionRatio);
   if (entries[0].intersectionRatio <= 0) return;
   if (onLoadMore && enabled) {
     const scrollingParent = root.value?.closest("[data-scrolling]") || document.documentElement;

assets/components/LogViewer/EventSource.vue

@@ -1,5 +1,5 @@
 <template>
-  <InfiniteLoader :onLoadMore="fetchMore" :enabled="messages.length > 50"></InfiniteLoader>
+  <InfiniteLoader :onLoadMore="fetchMore" :enabled="enabled && messages.length > 50" />
   <slot :messages="messages"></slot>
 </template>
 
@@ -13,18 +13,23 @@ const { entity, streamSource } = $defineProps<{
   entity: T;
 }>();
 
-const { messages, loadOlderLogs } = streamSource($$(entity));
+const { messages, loadOlderLogs, isLoadingMore } = streamSource($$(entity));
 
 const beforeLoading = () => loadingMore(true);
 const afterLoading = () => loadingMore(false);
+const enabled = ref(true);
 
 defineExpose({
   clear: () => (messages.value = []),
 });
 
 const fetchMore = async () => {
-  beforeLoading();
-  await loadOlderLogs();
-  afterLoading();
+  if (!isLoadingMore()) {
+    beforeLoading();
+    enabled.value = false;
+    await loadOlderLogs();
+    afterLoading();
+    enabled.value = true;
+  }
 };
 </script>

assets/composable/eventStreams.ts

@@ -186,8 +186,11 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
 
   watch(url, () => connect(), { immediate: true });
 
+  let fetchingInProgress = false;
+
   async function loadOlderLogs() {
     if (!loadMoreUrl) return;
+    if (fetchingInProgress) return;
 
     const to = messages[0].date;
     const last = messages[Math.min(messages.length - 1, 300)].date;
@@ -196,7 +199,7 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
 
     const abortController = new AbortController();
     const signal = abortController.signal;
-
+    fetchingInProgress = true;
     try {
       const stopWatcher = watchOnce(url, () => abortController.abort("stream changed"));
       const logs = await (
@@ -216,10 +219,14 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
       }
     } catch (e) {
       console.error("Error loading older logs", e);
+    } finally {
+      fetchingInProgress = false;
     }
   }
 
   onScopeDispose(() => close());
 
-  return { ...$$({ messages }), loadOlderLogs };
+  const isLoadingMore = () => fetchingInProgress;
+
+  return { ...$$({ messages }), loadOlderLogs, isLoadingMore };
 }