fix: footer count render independent of log table (#423)

Author: Koustavd18

src/hooks/useQueryResult.tsx

@@ -9,6 +9,7 @@ import { useFilterStore, filterStoreReducers } from '@/pages/Stream/providers/Fi
 import _ from 'lodash';
 import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
 import { notifyError } from '@/utils/notification';
+import { useState } from 'react';
 
 const { parseQuery } = filterStoreReducers;
 
@@ -83,6 +84,7 @@ export const useFetchCount = () => {
 	const [, setLogsStore] = useLogsStore(() => null);
 	const { isQuerySearchActive, custSearchQuery, activeMode } = custQuerySearchState;
 	const [appliedQuery] = useFilterStore((store) => store.appliedQuery);
+	const [countLoading, setCountLoading] = useState(true);
 
 	/* eslint-disable no-useless-escape */
 	const defaultQuery = `select count(*) as count from \"${currentStream}\"`;
@@ -110,13 +112,10 @@ export const useFetchCount = () => {
 		endTime: timeRange.endTime,
 		access: [],
 	};
-	const {
-		isLoading: isCountLoading,
-		isRefetching: isCountRefetching,
-		refetch: refetchCount,
-	} = useQuery(
+	const { refetch: refetchCount } = useQuery(
 		['fetchCount', logsQuery],
 		async () => {
+			setCountLoading(true);
 			const data = await getQueryResult(logsQuery, query);
 			const count = _.first(data.data)?.count;
 			typeof count === 'number' && setLogsStore((store) => setTotalCount(store, count));
@@ -127,12 +126,17 @@ export const useFetchCount = () => {
 			refetchOnWindowFocus: false,
 			retry: false,
 			enabled: false,
+			onSuccess: () => {
+				setCountLoading(false);
+			},
+			onError: () => {
+				setCountLoading(false);
+			},
 		},
 	);
 
 	return {
-		isCountLoading,
-		isCountRefetching,
+		countLoading,
 		refetchCount,
 	};
 };

src/pages/Stream/Views/Explore/Footer.tsx

@@ -27,7 +27,7 @@ const TotalLogsCount = (props: { hasTableLoaded: boolean; isFetchingCount: boole
 	if (typeof totalCount !== 'number' || typeof displayedCount !== 'number') return <Stack />;
 	return (
 		<Stack style={{ alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} gap={6}>
-			{props.hasTableLoaded ? (
+			{!props.isTableEmpty ? (
 				props.isFetchingCount ? (
 					<Loader type="dots" />
 				) : (
@@ -37,9 +37,7 @@ const TotalLogsCount = (props: { hasTableLoaded: boolean; isFetchingCount: boole
 						<Text style={{ fontSize: '0.7rem' }}>records</Text>
 					</>
 				)
-			) : props.isTableEmpty ? null : (
-				<Loader type="dots" />
-			)}
+			) : null}
 		</Stack>
 	);
 };

src/pages/Stream/Views/Explore/useLogsFetcher.ts

@@ -21,7 +21,7 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean })
 	const [{ info }] = useStreamStore((store) => store);
 	const firstEventAt = 'first-event-at' in info ? info['first-event-at'] : undefined;
 
-	const { refetchCount, isCountLoading, isCountRefetching } = useFetchCount();
+	const { refetchCount, countLoading } = useFetchCount();
 	const hasContentLoaded = schemaLoading === false && logsLoading === false;
 	const hasNoData = hasContentLoaded && !queryLogsError && pageData.length === 0;
 	const showTable = hasContentLoaded && !hasNoData && !queryLogsError;
@@ -55,7 +55,7 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean })
 		hasContentLoaded,
 		hasNoData,
 		showTable,
-		isFetchingCount: isCountLoading || isCountRefetching,
+		isFetchingCount: countLoading,
 	};
 };