fix: fix animation lags

CHANGELOG.md

@@ -1,6 +1,5 @@
 ## [1.11.1](https://github.com/vault-developer/event-loop-explorer/compare/v1.11.0...v1.11.1) (2025-01-13)
 
-
 ### Bug Fixes
 
 * fix animation lags ([#34](https://github.com/vault-developer/event-loop-explorer/issues/34)) ([436175c](https://github.com/vault-developer/event-loop-explorer/commit/436175cccfd7698c071c80c601f0bf4c0cdb78a7))

src/pages/home/sections/Wheel/Pointer/Pointer.tsx

@@ -1,18 +1,27 @@
 import * as Styled from './Pointer.styled.ts';
 import { useTimeStore } from 'store/store.ts';
+import { useEffect } from 'react';
+
+const INNER_POINTER_ID = 'InnerPointerId';
+const OUTER_POINTER_ID = 'OuterPointerId';
 
 function Pointer() {
-	const grad = useTimeStore((state) => state.grad);
+	useEffect(() => {
+		return useTimeStore.subscribe(({ grad }) => {
+			const innerBorder = document.getElementById(INNER_POINTER_ID);
+			const outerBorder = document.getElementById(OUTER_POINTER_ID);
+
+			if (innerBorder && outerBorder) {
+				innerBorder.style.transform = `rotate(${grad - 80}deg)`;
+				outerBorder.style.transform = `rotate(${grad - 80}deg)`;
+			}
+		});
+	}, []);
 
-	// TODO: consider direct style change w/o component re-render
 	return (
 		<>
-			<Styled.SectorWithInnerBorder
-				style={{ transform: `rotate(${grad - 80}deg)` }}
-			/>
-			<Styled.SectorWithOuterBorder
-				style={{ transform: `rotate(${grad - 80}deg)` }}
-			/>
+			<Styled.SectorWithInnerBorder id={INNER_POINTER_ID} />
+			<Styled.SectorWithOuterBorder id={OUTER_POINTER_ID} />
 		</>
 	);
 }