From 126c9238bad388da2859d178352b9dd0dcf6da55 Mon Sep 17 00:00:00 2001
From: Palash Gupta <palashgdev@gmail.com>
Date: Mon, 2 Jan 2023 12:08:35 +0530
Subject: [PATCH] feat: loading is added in the button (#1927)

* feat: loading is added in the button

* chore: disable condition is updated

Co-authored-by: Pranay Prateek <pranay@signoz.io>
---
 frontend/src/container/LogControls/config.ts  |  1 +
 frontend/src/container/LogControls/index.tsx  | 58 ++++++++++++++-----
 .../src/container/LogsSearchFilter/index.tsx  | 17 +++++-
 3 files changed, 62 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/container/LogControls/config.ts

diff --git a/frontend/src/container/LogControls/config.ts b/frontend/src/container/LogControls/config.ts
new file mode 100644
index 0000000000..7d3b0f71ee
--- /dev/null
+++ b/frontend/src/container/LogControls/config.ts
@@ -0,0 +1 @@
+export const ITEMS_PER_PAGE_OPTIONS = [25, 50, 100, 200];
diff --git a/frontend/src/container/LogControls/index.tsx b/frontend/src/container/LogControls/index.tsx
index ef8b8819a8..319b9b5f0d 100644
--- a/frontend/src/container/LogControls/index.tsx
+++ b/frontend/src/container/LogControls/index.tsx
@@ -4,7 +4,7 @@ import {
 	RightOutlined,
 } from '@ant-design/icons';
 import { Button, Divider, Select } from 'antd';
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import {
@@ -15,16 +15,19 @@ import {
 } from 'types/actions/logs';
 import { ILogsReducer } from 'types/reducer/logs';
 
+import { ITEMS_PER_PAGE_OPTIONS } from './config';
 import { Container } from './styles';
 
 const { Option } = Select;
 
-const ITEMS_PER_PAGE_OPTIONS = [25, 50, 100, 200];
-
 function LogControls(): JSX.Element | null {
-	const { logLinesPerPage, liveTail } = useSelector<AppState, ILogsReducer>(
-		(state) => state.logs,
-	);
+	const {
+		logLinesPerPage,
+		liveTail,
+		isLoading: isLogsLoading,
+		isLoadingAggregate,
+		logs,
+	} = useSelector<AppState, ILogsReducer>((state) => state.logs);
 	const dispatch = useDispatch();
 
 	const handleLogLinesPerPageChange = (e: number): void => {
@@ -51,29 +54,58 @@ function LogControls(): JSX.Element | null {
 		});
 	};
 
+	const isLoading = isLogsLoading || isLoadingAggregate;
+
+	const isNextAndPreviousDisabled = useMemo(
+		() =>
+			isLoading ||
+			logLinesPerPage === 0 ||
+			logs.length === 0 ||
+			logs.length < logLinesPerPage,
+		[isLoading, logLinesPerPage, logs.length],
+	);
+
 	if (liveTail !== 'STOPPED') {
 		return null;
 	}
+
 	return (
 		<Container>
-			<Button size="small" type="link" onClick={handleGoToLatest}>
+			<Button
+				loading={isLoading}
+				size="small"
+				type="link"
+				onClick={handleGoToLatest}
+			>
 				<FastBackwardOutlined /> Go to latest
 			</Button>
 			<Divider type="vertical" />
-			<Button size="small" type="link" onClick={handleNavigatePrevious}>
+			<Button
+				loading={isLoading}
+				size="small"
+				type="link"
+				disabled={isNextAndPreviousDisabled}
+				onClick={handleNavigatePrevious}
+			>
 				<LeftOutlined /> Previous
 			</Button>
-			<Button size="small" type="link" onClick={handleNavigateNext}>
+			<Button
+				loading={isLoading}
+				size="small"
+				type="link"
+				disabled={isNextAndPreviousDisabled}
+				onClick={handleNavigateNext}
+			>
 				Next <RightOutlined />
 			</Button>
 			<Select
-				style={{ width: 120 }}
+				loading={isLoading}
 				value={logLinesPerPage}
 				onChange={handleLogLinesPerPageChange}
 			>
-				{ITEMS_PER_PAGE_OPTIONS.map((count) => {
-					return <Option key={count} value={count}>{`${count} / page`}</Option>;
-				})}
+				{ITEMS_PER_PAGE_OPTIONS.map((count) => (
+					<Option key={count} value={count}>{`${count} / page`}</Option>
+				))}
 			</Select>
 		</Container>
 	);
diff --git a/frontend/src/container/LogsSearchFilter/index.tsx b/frontend/src/container/LogsSearchFilter/index.tsx
index 5b0136627f..5f2c6d482d 100644
--- a/frontend/src/container/LogsSearchFilter/index.tsx
+++ b/frontend/src/container/LogsSearchFilter/index.tsx
@@ -16,7 +16,12 @@ import { getLogs } from 'store/actions/logs/getLogs';
 import { getLogsAggregate } from 'store/actions/logs/getLogsAggregate';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
-import { FLUSH_LOGS, TOGGLE_LIVE_TAIL } from 'types/actions/logs';
+import {
+	FLUSH_LOGS,
+	SET_LOADING,
+	SET_LOADING_AGGREGATE,
+	TOGGLE_LIVE_TAIL,
+} from 'types/actions/logs';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { ILogsReducer } from 'types/reducer/logs';
 
@@ -121,7 +126,17 @@ function SearchFilter({
 	const urlQueryString = urlQuery.get('q');
 
 	useEffect(() => {
+		dispatch({
+			type: SET_LOADING,
+			payload: true,
+		});
+		dispatch({
+			type: SET_LOADING_AGGREGATE,
+			payload: true,
+		});
+
 		const debouncedHandleSearch = debounce(handleSearch, 600);
+
 		debouncedHandleSearch(urlQueryString || '');
 
 		return (): void => {