Update Simulation page request

src/ThreeEditor/components/Dialog/RunSimulationDialog.tsx

@@ -1,6 +1,6 @@
 import { Card, CardContent, Fade, Modal } from '@mui/material';
 import { enqueueSnackbar } from 'notistack';
-import { useCallback, useState } from 'react';
+import { useState } from 'react';
 
 import { useShSimulation } from '../../../services/ShSimulatorService';
 import { useStore } from '../../../services/StoreService';

src/WrapperApp/components/Simulation/RunSimulationForm.tsx

@@ -245,7 +245,7 @@ export function RunSimulationForm({
 						onChange={handleSourceTypeChange}>
 						<ToggleButton
 							size='small'
-							value='project'
+							value='editor'
 							color='primary'>
 							Editor Project Data
 						</ToggleButton>

src/WrapperApp/components/Simulation/SimulationPanel.tsx

@@ -1,5 +1,5 @@
 import { Box, Fade, Modal } from '@mui/material';
-import { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useConfig } from '../../../config/ConfigService';
 import { isFullSimulationData } from '../../../services/LoaderService';
@@ -70,7 +70,6 @@ export default function SimulationPanel({
 	const [simulationInfo, setSimulationInfo] = useState<SimulationInfo[]>([]);
 	const [simulationsStatusData, setSimulationsStatusData] = useState<JobStatusData[]>([]);
 
-	const [simulationIDInterval, setSimulationIDInterval] = useState<number>();
 	const [controller] = useState(new AbortController());
 
 	const updateSimulationInfo = useCallback(
@@ -111,7 +110,6 @@ export default function SimulationPanel({
 				.then(() => {
 					setBackendAlive(true);
 					updateSimulationInfo();
-					setSimulationIDInterval(30000);
 				})
 				.catch(() => {
 					setBackendAlive(false);
@@ -120,22 +118,24 @@ export default function SimulationPanel({
 
 		return () => {
 			controller.abort();
-			setSimulationIDInterval(undefined);
 		};
 	}, [
 		controller.signal,
 		getHelloWorld,
 		updateSimulationInfo,
-		setSimulationIDInterval,
 		isBackendAlive,
 		setBackendAlive,
 		demoMode,
+		trackedId,
 		controller
 	]);
 
-	useIntervalAsync(updateSimulationInfo, simulationIDInterval);
+	const simulationDataInterval = useMemo(() => {
+		if (simulationInfo.length > 0 && !demoMode && isBackendAlive) return 1000;
+		// interval 1 second if there are simulations to track and there is connection to backend
+	}, [simulationInfo, demoMode, isBackendAlive]);
 
-	useIntervalAsync(updateSimulationData, simulationInfo.length > 0 ? 1000 : simulationIDInterval);
+	useIntervalAsync(updateSimulationData, simulationDataInterval);
 
 	const handleLoadResults = async (taskId: string | null, simulation: unknown) => {
 		if (taskId === null) return goToResults?.call(null);

src/util/hooks/useIntervalAsync.ts

@@ -1,27 +1,21 @@
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { clearIntervalAsync, setIntervalAsync } from 'set-interval-async';
 
 function useIntervalAsync(
 	callback: () => Promise<void>,
 	delay?: number,
 	immediate: boolean = delay === undefined
 ) {
-	const callbackRef = useRef(callback);
-
-	useEffect(() => {
-		callbackRef.current = callback;
-	}, [callback]);
-
 	useEffect(() => {
 		let interval: ReturnType<typeof setIntervalAsync> | null = null;
 
-		if (immediate) callbackRef.current();
-		else interval = setIntervalAsync(callbackRef.current, delay!);
+		if (immediate) callback();
+		if (delay !== undefined) interval = setIntervalAsync(callback, delay);
 
 		return () => {
 			if (interval) clearIntervalAsync(interval);
 		};
-	}, [delay, immediate]);
+	}, [delay, immediate, callback]);
 }
 
 export default useIntervalAsync;