tab switch simulation paused implemented

app/src/components/ui/simulation/simulationPlayer.tsx

@@ -109,12 +109,24 @@ const SimulationPlayer: React.FC = () => {
     isDragging.current = false;
   };
 
+  const handleVisibility = () => {
+    if (document.visibilityState !== 'visible' && isPlaying) {
+      setIsPaused(!isPaused);
+      if (isPaused) {
+        setIsPlaying(true);
+      }
+      echo.warn(`Simulation is ${isPaused ? "Resumed" : "Paused"}`);
+    }
+  }
+
   useEffect(() => {
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener('visibilitychange', handleVisibility);
     return () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener('visibilitychange', handleVisibility);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);