Loading state issue fixed and New Loader animation

src/assets/customLoader/ParseableAnimate.tsx

@@ -0,0 +1,60 @@
+import { forwardRef } from 'react';
+import { MantineLoaderComponent } from '@mantine/core';
+
+const ParseableAnimated: MantineLoaderComponent = forwardRef(() => (
+	<svg height="60px" width="60px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15">
+		<defs>
+			<filter id="iconfilter" primitiveUnits="objectBoundingBox">
+				<feFlood floodColor="#545beb" />
+
+				<feOffset>
+					<animate attributeName="dy" from="1" to="0" dur="1500ms" repeatCount="indefinite" />
+				</feOffset>
+
+				<feComposite operator="in" in2="SourceGraphic" />
+				<feComposite operator="over" in2="SourceGraphic" />
+			</filter>
+			<filter id="iconfilterRed" primitiveUnits="objectBoundingBox">
+				<feFlood floodColor="#fc466b" />
+
+				<feOffset>
+					<animate attributeName="dy" from="1" to="0" dur="1500ms" repeatCount="indefinite" />
+				</feOffset>
+
+				<feComposite operator="in" in2="SourceGraphic" />
+				<feComposite operator="over" in2="SourceGraphic" />
+			</filter>
+		</defs>
+		<g>
+			<path
+				filter="url(#iconfilter)"
+				fill="rgba(84,91,235, 0.6)"
+				d="M13.92,7.76l-5.93,5.93c-.26,.26-.06,.71,.31,.68,1.57-.12,3.11-.78,4.31-1.99s1.86-2.74,1.99-4.31c.03-.37-.42-.57-.68-.31Z"
+			/>
+			<path
+				filter="url(#iconfilter)"
+				fill="rgba(84,91,235, 0.6)"
+				d="M13.97,4.61v-.02c-.36-.74-1.33-.92-1.91-.34l-7.58,7.58c-.58,.58-.4,1.55,.34,1.9h.02c.44,.22,.97,.12,1.32-.23l7.57-7.57c.35-.35,.45-.87,.24-1.32Z"
+			/>
+			<path
+				filter="url(#iconfilter)"
+				fill="rgba(84,91,235, 0.6)"
+				d="M7.54,1.38c.26-.26,.06-.71-.31-.68-1.57,.12-3.11,.78-4.31,1.99S1.05,5.43,.93,7c-.03,.37,.42,.57,.68,.31L7.54,1.38Z"
+			/>
+		</g>
+		<g>
+			<path
+				filter="url(#iconfilter)"
+				fill="rgba(84,91,235, 0.6)"
+				d="M2.67,8.27l-.87,.87c-.35,.35-.44,.88-.23,1.33v.02c.36,.73,1.33,.9,1.9,.33l.88-.88c.46-.46,.46-1.21,0-1.68h0c-.46-.46-1.21-.46-1.68,0Z"
+			/>
+			<path
+				filter="url(#iconfilterRed)"
+				fill="rgba(252,	70,	107, 0.7)"
+				d="M7.09,7.2l3.96-3.96c.57-.57,.41-1.54-.33-1.89h-.02c-.45-.22-.98-.13-1.33,.22l-3.96,3.96c-.46,.46-.46,1.21,0,1.68h0c.46,.46,1.21,.46,1.68,0Z"
+			/>
+		</g>
+	</svg>
+));
+
+export default ParseableAnimated;

src/components/Mantine/theme.tsx

@@ -1,5 +1,5 @@
-import { createTheme, rem } from '@mantine/core';
-
+import { createTheme, rem, Loader } from '@mantine/core';
+import ParseableAnimate from '@/assets/customLoader/ParseableAnimate';
 export const theme = createTheme({
 	colors: {
 		brandPrimary: [
@@ -67,4 +67,11 @@ export const theme = createTheme({
 	},
 	fontFamily:
 		'Inter ,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji',
+	components: {
+		Loader: Loader.extend({
+			defaultProps: {
+				loaders: { ...Loader.defaultLoaders, parseable: ParseableAnimate },
+			},
+		}),
+	},
 });

src/hooks/useQueryLogs.ts

@@ -31,6 +31,7 @@ export const useQueryLogs = () => {
 	const _dataRef = useRef<Log[] | null>(null);
 	const [error, setError] = useMountedState<string | null>(null);
 	const [loading, setLoading] = useMountedState<boolean>(false);
+	const [isFetchingCount, setIsFetchingCount] = useMountedState<boolean>(false);
 	const [pageLogData, setPageLogData] = useMountedState<LogsData | null>(null);
 	const [querySearch, setQuerySearch] = useMountedState<LogsSearch>({
 		search: '',
@@ -118,6 +119,7 @@ export const useQueryLogs = () => {
 
 	const fetchCount = () => {
 		try {
+			setIsFetchingCount(true);
 			const defaultQuery = `select count(*) as count from ${currentStream}`;
 			const query = isQuerySearchActive
 				? custSearchQuery.replace(/SELECT[\s\S]*?FROM/i, 'SELECT COUNT(*) as count FROM')
@@ -136,6 +138,8 @@ export const useQueryLogs = () => {
 			}
 		} catch (e) {
 			console.log(e);
+		} finally {
+			setIsFetchingCount(false);
 		}
 	};
 
@@ -155,5 +159,6 @@ export const useQueryLogs = () => {
 		getQueryData,
 		resetData,
 		fetchCount,
+		isFetchingCount,
 	};
 };

src/pages/Home/index.tsx

@@ -69,14 +69,16 @@ const Home: FC = () => {
 						justifyContent: 'space-between',
 						flexDirection: 'row',
 					}}>
-					<Text style={{fontSize: '0.8rem'}} fw={500}>All Streams</Text>
+					<Text style={{ fontSize: '0.8rem' }} fw={500}>
+						All Streams
+					</Text>
 					<Box>
 						{userAccessMap.hasCreateStreamAccess && (
 							<Button
 								variant="outline"
 								className={createStreamButton}
 								onClick={openCreateStreamModal}
-								leftSection={<IconPlus stroke={2} size={"1rem"}/>}>
+								leftSection={<IconPlus stroke={2} size={'1rem'} />}>
 								Create Stream
 							</Button>
 						)}
@@ -101,9 +103,7 @@ export default Home;
 const BigNumber = (props: { label: string; value: any; color?: string }) => {
 	return (
 		<Box className={cardStyles.streamBoxCol} style={{ width: '11%' }}>
-			<Text style={{ color: 'black', fontSize: '0.6rem' }}>
-				{props.label}
-			</Text>
+			<Text style={{ color: 'black', fontSize: '0.6rem' }}>{props.label}</Text>
 			<Text fw={700} className={cardStyles.bigNo}>
 				{props.value}
 			</Text>

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

@@ -13,10 +13,10 @@ import {
 	Flex,
 	Button,
 	Pagination,
-	Loader,
 	Group,
 	Stack,
 	Tooltip,
+	Loader,
 } from '@mantine/core';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { FC, MutableRefObject, ReactNode, RefObject } from 'react';
@@ -68,17 +68,26 @@ const TotalCount = (props: { totalCount: number }) => {
 
 const renderExportIcon = () => <IconDownload size={px('0.8rem')} stroke={1.8} />;
 
-const TotalLogsCount = () => {
+const TotalLogsCount = (props: { hasTableLoaded: boolean; isFetchingCount: boolean; isTableEmpty: boolean }) => {
 	const [{ totalCount, perPage, pageData }] = useLogsStore((store) => store.tableOpts);
 	const displayedCount = _.size(pageData);
 	const showingCount = displayedCount < perPage ? displayedCount : perPage;
 	if (typeof totalCount !== 'number' || typeof displayedCount !== 'number') return <Stack />;
-
 	return (
 		<Stack style={{ alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} gap={6}>
-			<Text style={{ fontSize: '0.7rem' }}>{`Showing ${showingCount} out of`}</Text>
-			<TotalCount totalCount={totalCount} />
-			<Text style={{ fontSize: '0.7rem' }}>records</Text>
+			{props.hasTableLoaded ? (
+				props.isFetchingCount ? (
+					<Loader type="dots" />
+				) : (
+					<>
+						<Text style={{ fontSize: '0.7rem' }}>{`Showing ${showingCount} out of`}</Text>
+						<TotalCount totalCount={totalCount} />
+						<Text style={{ fontSize: '0.7rem' }}>records</Text>
+					</>
+				)
+			) : props.isTableEmpty ? null : (
+				<Loader type="dots" />
+			)}
 		</Stack>
 	);
 };
@@ -191,13 +200,20 @@ const ErrorView = (props: { message: string }) => {
 
 const LoadingView = () => {
 	return (
-		<Stack w="100%" align="center" h="100%" style={{ alignItems: 'center', justifyContent: 'center' }}>
-			<Loader variant="dots" />
+		<Stack
+			w="100%"
+			align="center"
+			h="100%"
+			style={{
+				alignItems: 'center',
+				justifyContent: 'center',
+			}}>
+			<Loader type="parseable" />
 		</Stack>
 	);
 };
 
-const Footer = (props: { loaded: boolean }) => {
+const Footer = (props: { loaded: boolean; isLoading: boolean; hasNoData: boolean }) => {
 	const [tableOpts, setLogsStore] = useLogsStore((store) => store.tableOpts);
 	const [filteredData] = useLogsStore((store) => store.data.filteredData);
 	const { totalPages, currentOffset, currentPage, perPage, headers, totalCount } = tableOpts;
@@ -240,7 +256,11 @@ const Footer = (props: { loaded: boolean }) => {
 	return (
 		<Stack className={tableStyles.footerContainer} gap={0}>
 			<Stack w="100%" justify="center" align="flex-start">
-				{!props.loaded ? null : <TotalLogsCount />}
+				<TotalLogsCount
+					hasTableLoaded={props.loaded}
+					isFetchingCount={props.isLoading}
+					isTableEmpty={props.hasNoData}
+				/>
 			</Stack>
 			<Stack w="100%" justify="center">
 				{props.loaded ? (
@@ -350,7 +370,7 @@ const LogTable = (props: { schemaLoading: boolean }) => {
 		? PRIMARY_HEADER_HEIGHT + LOGS_PRIMARY_TOOLBAR_HEIGHT + LOGS_SECONDARY_TOOLBAR_HEIGHT
 		: 0;
 
-	const { getQueryData, loading: logsLoading, error: logsError, fetchCount } = useQueryLogs();
+	const { getQueryData, loading: logsLoading, error: logsError, fetchCount, isFetchingCount } = useQueryLogs();
 	const [currentPage] = useLogsStore((store) => store.tableOpts.currentPage);
 	const [currentOffset, setLogsStore] = useLogsStore((store) => store.tableOpts.currentOffset);
 
@@ -391,14 +411,14 @@ const LogTable = (props: { schemaLoading: boolean }) => {
 						</Box>
 					</Box>
 				) : hasNoData ? (
-					<EmptyBox message="No Data Available" />
+					<EmptyBox message="No Matching Rows" />
 				) : (
 					<LoadingView />
 				)
 			) : (
 				<ErrorView message={errorMessage} />
 			)}
-			<Footer loaded={showTable} />
+			<Footer loaded={showTable} isLoading={isFetchingCount} hasNoData={hasNoData} />
 		</TableContainer>
 	);
 };

src/pages/Stream/index.tsx

@@ -64,7 +64,14 @@ const Logs: FC = () => {
 	// todo - have separate ui components for loading and error states
 
 	return (
-		<Box style={{ flex: 1, display: 'flex', position: 'relative', flexDirection: 'row', width: '100%' }}>
+		<Box
+			style={{
+				flex: 1,
+				display: 'flex',
+				position: 'relative',
+				flexDirection: 'row',
+				width: '100%',
+			}}>
 			<ViewLog />
 			<Stack style={{ width: sideBarWidth }}>
 				<SideBar />