fix: fix animation lags (#34)

Author: vault-developer

CHANGELOG.md

@@ -1,9 +1,8 @@
 # [1.11.0](https://github.com/vault-developer/event-loop-explorer/compare/v1.10.2...v1.11.0) (2025-01-12)
 
-
 ### Features
 
-* **ds:** update design system ([#33](https://github.com/vault-developer/event-loop-explorer/issues/33)) ([e746d3d](https://github.com/vault-developer/event-loop-explorer/commit/e746d3d983db1bb5c292ecdff6229e830f9eb566))
+- **ds:** update design system ([#33](https://github.com/vault-developer/event-loop-explorer/issues/33)) ([e746d3d](https://github.com/vault-developer/event-loop-explorer/commit/e746d3d983db1bb5c292ecdff6229e830f9eb566))
 
 ## [1.10.2](https://github.com/vault-developer/event-loop-explorer/compare/v1.10.1...v1.10.2) (2024-12-31)
 

src/pages/home/sections/WebApiQueue/WebApiTask.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, Ref, useEffect, useState } from 'react';
 import * as Styled from './WebApiTask.styled.ts';
 import { WebApiSectionElement } from 'src/types.ts';
-import { useSimulatorStore } from 'store/store.ts';
+import { useTimeStore } from 'store/store.ts';
 
 const WebApiTask = forwardRef(
 	({ task }: { task: WebApiSectionElement }, ref: Ref<HTMLDivElement>) => {
@@ -10,7 +10,7 @@ const WebApiTask = forwardRef(
 
 		useEffect(() => {
 			const checkProgress = () => {
-				const remainingTime = task.end - useSimulatorStore.getState().time;
+				const remainingTime = task.end - useTimeStore.getState().time;
 				const progressPercentage = Math.trunc((remainingTime / delay) * 100);
 				const newProgress = Math.max(0, Math.min(progressPercentage, 100));
 				setProgress(newProgress);

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

@@ -1,8 +1,8 @@
 import * as Styled from './Pointer.styled.ts';
-import { useWheelStore } from 'store/store.ts';
+import { useTimeStore } from 'store/store.ts';
 
 function Pointer() {
-	const grad = useWheelStore((state) => state.grad);
+	const grad = useTimeStore((state) => state.grad);
 
 	// TODO: consider direct style change w/o component re-render
 	return (

src/store/store.ts

@@ -4,6 +4,7 @@ import {
 	QueueManager,
 	Simulator,
 	ThemeState,
+	Time,
 	Wheel,
 } from './store.types.ts';
 import { indexToRowColumn } from 'utils/editor.ts';
@@ -55,27 +56,30 @@ export const useQueueManagerStore = create<QueueManager>((set) => ({
 		}),
 }));
 
-export const useWheelStore = create<Wheel>((set) => ({
+export const useTimeStore = create<Time>((set) => ({
+	time: 0,
 	grad: 0,
+	setTime: (time) => set({ time, grad: time % 360 }),
+}));
+
+export const useWheelStore = create<Wheel>((set) => ({
 	render: false,
 	macrotask: false,
 	microtask: false,
-	setGrad: (grad) => set({ grad }),
 	setStop: ({ stop, enabled }) => set({ [stop]: enabled }),
-	clear: () =>
+	clear: () => {
+		useTimeStore.getState().setTime(0);
 		set(() => ({
-			grad: 0,
 			render: false,
 			macrotask: false,
 			microtask: false,
-		})),
+		}));
+	},
 }));
 
 export const useSimulatorStore = create<Simulator>((set) => ({
 	speed: 1,
 	setSpeed: (speed) => set(() => ({ speed })),
-	time: 0,
-	setTime: (time) => set(() => ({ time })),
 	status: 'idle',
 	setStatus: (status) => set(() => ({ status })),
 	clear: () =>

src/store/store.types.ts

@@ -24,8 +24,6 @@ export interface QueueManager {
 }
 
 export interface Simulator {
-	time: number;
-	setTime(time: number): void;
 	speed: number;
 	setSpeed(time: number): void;
 	status: 'idle' | 'running' | 'paused';
@@ -34,12 +32,10 @@ export interface Simulator {
 }
 
 export interface Wheel {
-	grad: number;
 	render: boolean;
 	macrotask: boolean;
 	microtask: boolean;
 	clear: () => void;
-	setGrad(grad: number): void;
 	setStop({
 		stop,
 		enabled,
@@ -49,6 +45,12 @@ export interface Wheel {
 	}): void;
 }
 
+export interface Time {
+	time: number;
+	grad: number;
+	setTime(grad: number): void;
+}
+
 export interface Editor {
 	ref: RefObject<AceEditor | null> | null;
 	setRef(ref: RefObject<AceEditor>): void;

src/utils/simulate.ts

@@ -3,6 +3,7 @@ import {
 	useEditorStore,
 	useQueueManagerStore,
 	useSimulatorStore,
+	useTimeStore,
 	useWheelStore,
 } from 'store/store.ts';
 import { delay } from 'utils/delay.ts';
@@ -28,7 +29,7 @@ export const simulate = (steps: ELSerialisedStep[], onStop: () => void) => {
 			await delay(250);
 		}
 		if (useSimulatorStore.getState().status === 'idle') return;
-		const time = useSimulatorStore.getState().time;
+		const time = useTimeStore.getState().time;
 		const steps = groupedSteps[time];
 		if (steps !== undefined) {
 			for (const step of steps) {
@@ -44,9 +45,7 @@ export const simulate = (steps: ELSerialisedStep[], onStop: () => void) => {
 		const speed = useSimulatorStore.getState().speed;
 		const nextTime = getNextTime({ time, speed, groupedSteps });
 
-		useSimulatorStore.getState().setTime(nextTime);
-		useWheelStore.getState().setGrad(nextTime % 360);
-
+		useTimeStore.getState().setTime(nextTime);
 		requestAnimationFrame(animate);
 	};
 	animate();
@@ -71,7 +70,8 @@ const getNextTime = ({
 };
 
 const considerDelay = async () => {
-	const { grad, macrotask, microtask, render } = useWheelStore.getState();
+	const { macrotask, microtask, render } = useWheelStore.getState();
+	const { grad } = useTimeStore.getState();
 	const { renders, microtasks, macrotasks } = EVENT_LOOP_WHEEL_STOPS;
 	const speed = useSimulatorStore.getState().speed;