apps/dispatch/app/(app)/pilot/page.tsx

@@ -9,10 +9,11 @@ import { ConnectedDispatcher } from "tracker/_components/ConnectedDispatcher";
 import { useQuery } from "@tanstack/react-query";
 import { usePilotConnectionStore } from "_store/pilot/connectionStore";
 import { getConnectedAircraftsAPI } from "_querys/aircrafts";
-import { checkSimulatorConnected } from "@repo/shared-components";
+import { checkSimulatorConnected, useDebounce } from "@repo/shared-components";
 import { SimConnectionAlert } from "(app)/pilot/_components/SimConnectionAlert";
 import { SettingsBoard } from "_components/left/SettingsBoard";
 import { BugReport } from "_components/left/BugReport";
+import { useEffect, useState } from "react";
 
 const Map = dynamic(() => import("_components/map/Map"), {
 	ssr: false,
@@ -26,6 +27,22 @@ const PilotPage = () => {
 		queryFn: () => getConnectedAircraftsAPI(),
 		refetchInterval: 10_000,
 	});
+	const [shortlyConnected, setShortlyConnected] = useState(false);
+	useDebounce(
+		() => {
+			if (status === "connected") {
+				setShortlyConnected(false);
+			}
+		},
+		30_000,
+		[status],
+	);
+
+	useEffect(() => {
+		if (status === "connected") {
+			setShortlyConnected(true);
+		}
+	}, [status]);
 
 	const ownAircraft = aircrafts?.find((aircraft) => aircraft.id === connectedAircraft?.id);
 	const simulatorConnected = ownAircraft ? checkSimulatorConnected(ownAircraft) : false;
@@ -47,7 +64,10 @@ const PilotPage = () => {
 						</div>
 						<Map />
 						<div className="absolute right-10 top-5 z-20 space-y-2">
-							{!simulatorConnected && status === "connected" && (
+							{!simulatorConnected &&
+								status === "connected" &&
+								connectedAircraft &&
+								!shortlyConnected && (
 									<SimConnectionAlert lastUpdated={ownAircraft?.lastHeartbeat} />
 								)}
 							<ConnectedDispatcher />