diff --git a/assets/components/InfiniteLoader.vue b/assets/components/InfiniteLoader.vue index 141a34b3..a23bc562 100644 --- a/assets/components/InfiniteLoader.vue +++ b/assets/components/InfiniteLoader.vue @@ -14,7 +14,6 @@ const isLoading = ref(false); const root = ref(); 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; diff --git a/assets/components/LogViewer/EventSource.vue b/assets/components/LogViewer/EventSource.vue index 84f83d59..9149d0d8 100644 --- a/assets/components/LogViewer/EventSource.vue +++ b/assets/components/LogViewer/EventSource.vue @@ -1,5 +1,5 @@ @@ -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; + } }; diff --git a/assets/composable/eventStreams.ts b/assets/composable/eventStreams.ts index 89d00aca..0195fe25 100644 --- a/assets/composable/eventStreams.ts +++ b/assets/composable/eventStreams.ts @@ -186,8 +186,11 @@ function useLogStream(url: Ref, loadMoreUrl?: Ref) { 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, loadMoreUrl?: Ref) { 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, loadMoreUrl?: Ref) { } } catch (e) { console.error("Error loading older logs", e); + } finally { + fetchingInProgress = false; } } onScopeDispose(() => close()); - return { ...$$({ messages }), loadOlderLogs }; + const isLoadingMore = () => fetchingInProgress; + + return { ...$$({ messages }), loadOlderLogs, isLoadingMore }; }