Add dashboard panel loading animation and live data refresh

Author: sebastiankrll

apps/ingestion/src/dashboard.ts

@@ -5,13 +5,20 @@ import axios from "axios";
 const VATSIM_EVENT_URL = "https://my.vatsim.net/api/v2/events/latest";
 const VATSIM_EVENT_INTERVAL = 60 * 60 * 1000;
 const VATSIM_HISTORY_WINDOW = 24 * 60 * 60 * 1000;
+const VATSIM_HISTORY_INTERVAL = 5 * 60 * 1000;
+
+let lastHistoryUpdateTimestamp: Date | null = null;
 
 export async function updateDashboardData(vatsimData: VatsimData, controllers: ControllerLong[]): Promise<void> {
     updateVatsimEvents();
 
     const stats = getDashboardStats(vatsimData, controllers);
     rdsSetSingle("dashboard:stats", stats);
 
+    if (lastHistoryUpdateTimestamp && Date.now() - lastHistoryUpdateTimestamp.getTime() < VATSIM_HISTORY_INTERVAL) {
+        return;
+    }
+    lastHistoryUpdateTimestamp = new Date();
     const historyItem = { pilots: vatsimData.pilots.length, controllers: controllers.length };
     rdsSetRingStorage("dashboard:history", historyItem, VATSIM_HISTORY_WINDOW);
 }

apps/web/app/page.tsx

@@ -14,5 +14,5 @@ async function fetchDashboardData(): Promise<DashboardData | null> {
 export default async function Page() {
 	const dashboardData = await fetchDashboardData();
 	if (!dashboardData) return <div className="info-panel error">Failed to load dashboard data.</div>;
-	return <DashboardPanel data={dashboardData} />;
+	return <DashboardPanel initialData={dashboardData} />;
 }

apps/web/components/Panels/BasePanel.css

@@ -6,7 +6,7 @@
 	max-height: calc(100% - 6rem);
 	display: flex;
 	flex-flow: column;
-	transition: ease left 0.2s;
+	transition: ease left 0.3s;
 	background: rgba(255, 255, 255, 0.5);
 	backdrop-filter: blur(5px);
 	border: 1px solid var(--color-border);
@@ -17,6 +17,60 @@
 	left: -20rem;
 }
 
+#panel-loader-wrapper {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: var(--color-blue);
+	z-index: 2;
+}
+
+#panel-loader {
+	width: 48px;
+	height: 48px;
+	border-radius: 50%;
+	position: relative;
+	animation: rotate 1s linear infinite;
+}
+#panel-loader::before {
+	content: "";
+	box-sizing: border-box;
+	position: absolute;
+	inset: 0px;
+	border-radius: 50%;
+	border: 5px solid #fff;
+	animation: prixClipFix 2s linear infinite;
+}
+
+@keyframes rotate {
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes prixClipFix {
+	0% {
+		clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+	}
+	25% {
+		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+	}
+	50% {
+		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+	}
+	75% {
+		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+	}
+	100% {
+		clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+	}
+}
+
 .panel-container {
 	display: flex;
 	background-color: white;

apps/web/components/Panels/BasePanel.tsx

@@ -6,7 +6,6 @@ import { useEffect, useRef, useState } from "react";
 
 export default function BasePanel({ children }: { children: React.ReactNode }) {
 	const pathname = usePathname();
-	const [rendered, setRendered] = useState<React.ReactNode>(children);
 	const [open, setOpen] = useState(true);
 	const prevPath = useRef<string | null>(null);
 
@@ -19,14 +18,24 @@ export default function BasePanel({ children }: { children: React.ReactNode }) {
 		if (prevPath.current === type) return;
 
 		setOpen(false);
-		const t = setTimeout(() => {
-			setRendered(children);
+		const openTimeout = setTimeout(() => {
 			setOpen(true);
 			prevPath.current = type;
-		}, 200);
+		}, 300);
 
-		return () => clearTimeout(t);
-	}, [children, pathname]);
+		return () => {
+			clearTimeout(openTimeout);
+		};
+	}, [pathname]);
 
-	return <div className={`panel${open ? "" : " hide"}`}>{rendered}</div>;
+	return (
+		<div className={`panel${open ? "" : " hide"}`}>
+			{!open && (
+				<div id="panel-loader-wrapper">
+					<div id="panel-loader"></div>
+				</div>
+			)}
+			{children}
+		</div>
+	);
 }

apps/web/components/Panels/Dashboard/DashboardPanel.tsx

@@ -28,7 +28,10 @@ function getStoredOpenSections(): string[] {
 	return [];
 }
 
-export default function DashboardPanel({ data }: { data: DashboardData }) {
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001/api";
+
+export default function DashboardPanel({ initialData }: { initialData: DashboardData }) {
+	const [data, setData] = useState<DashboardData>(initialData);
 	const historyRef = useRef<HTMLDivElement>(null);
 	const statsRef = useRef<HTMLDivElement>(null);
 	const eventsRef = useRef<HTMLDivElement>(null);
@@ -42,6 +45,19 @@ export default function DashboardPanel({ data }: { data: DashboardData }) {
 
 	useEffect(() => {
 		setOpenSection(getStoredOpenSections());
+		const fetchInterval = setInterval(async () => {
+			const newData = fetch(`${BASE_URL}/data/dashboard`, { cache: "no-store" })
+				.then((res) => {
+					if (!res.ok) return null;
+					return res.json();
+				})
+				.catch(() => null);
+			if (newData) {
+				setData(await newData);
+			}
+		}, 60000);
+
+		return () => clearInterval(fetchInterval);
 	}, []);
 
 	useEffect(() => {