From 6f4af0a2a18c345defc7b9b93b2969705add0acd Mon Sep 17 00:00:00 2001
From: Aditya Singh <adityasinghssj1@gmail.com>
Date: Tue, 25 Aug 2026 07:58:47 +0000
Subject: [PATCH] fix: stop prev/next buttons shifting on load (#12670)

<!--A few plain bullets saying what changed and why, for a reviewer
skimming it - not a wall of text, not a restatement of the diff, not
generated boilerplate.-->
#### Description
This PR fixes the Prev and next buttons shifting down on click due to
loader .

- cause was recent [icon
migration](https://github.com/SigNoz/signoz/pull/11222) away from antd
which restyled the loader.
- removed the loader on these buttons. they already disable while
loading, so the spinner was redundant and it was what caused the shift
- moved the buttons from antd (`Button`/`Flex`/`Spin`) to the
`@signozhq/ui` button
- removed the styled-components file, layout is a css module now

<!--Reference issues using `Closes #issue-number` to enable automatic
closure on merge. -->
#### Issues closed by this PR

https://github.com/SigNoz/engineering-pod/issues/5942

<!--If applicable, include screenshots or screen recordings that clearly
show the behavior before the change and the result after the change. -->
#### Screenshots / Screen Recordings

Before


https://github.com/user-attachments/assets/db76270b-60f3-441f-adad-96abec9dd04b

After


https://github.com/user-attachments/assets/bb844652-b274-4849-9d49-485080308484
---
 .../container/Controls/Controls.module.scss   |  6 ++++
 frontend/src/container/Controls/index.tsx     | 29 +++++++++----------
 frontend/src/container/Controls/styles.ts     |  7 -----
 3 files changed, 19 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/container/Controls/Controls.module.scss
 delete mode 100644 frontend/src/container/Controls/styles.ts

diff --git a/frontend/src/container/Controls/Controls.module.scss b/frontend/src/container/Controls/Controls.module.scss
new file mode 100644
index 00000000000..c3d46cb4196
--- /dev/null
+++ b/frontend/src/container/Controls/Controls.module.scss
@@ -0,0 +1,6 @@
+.container {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	--button-font-size: var(--periscope-font-size-base, 13px);
+}
diff --git a/frontend/src/container/Controls/index.tsx b/frontend/src/container/Controls/index.tsx
index 7f685fbf5aa..c562010fd2d 100644
--- a/frontend/src/container/Controls/index.tsx
+++ b/frontend/src/container/Controls/index.tsx
@@ -1,11 +1,12 @@
 import { memo, useMemo } from 'react';
 import { ChevronLeft, ChevronRight } from '@signozhq/icons';
-import { Button, Flex, Select } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { Select } from 'antd';
 import { DEFAULT_PER_PAGE_OPTIONS, Pagination } from 'hooks/queryPagination';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { defaultSelectStyle } from './config';
-import { Container } from './styles';
+import styles from './Controls.module.scss';
 
 function Controls({
 	offset = 0,
@@ -34,28 +35,24 @@ function Controls({
 	);
 
 	return (
-		<Container>
+		<div className={styles.container}>
 			<Button
-				loading={isLoading}
-				size="small"
-				type="link"
+				variant="link"
+				size="md"
 				disabled={isPreviousDisabled}
+				prefix={<ChevronLeft size={16} />}
 				onClick={handleNavigatePrevious}
 			>
-				<Flex align="center" gap="4px">
-					<ChevronLeft size={16} /> Previous
-				</Flex>
+				Previous
 			</Button>
 			<Button
-				loading={isLoading}
-				size="small"
-				type="link"
+				variant="link"
+				size="md"
 				disabled={isNextDisabled}
+				suffix={<ChevronRight size={16} />}
 				onClick={handleNavigateNext}
 			>
-				<Flex align="center" gap="4px">
-					Next <ChevronRight size={16} />
-				</Flex>
+				Next
 			</Button>
 
 			{showSizeChanger && (
@@ -74,7 +71,7 @@ function Controls({
 					))}
 				</Select>
 			)}
-		</Container>
+		</div>
 	);
 }
 
diff --git a/frontend/src/container/Controls/styles.ts b/frontend/src/container/Controls/styles.ts
deleted file mode 100644
index 0407b8f7902..00000000000
--- a/frontend/src/container/Controls/styles.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-`;