Merge pull request #47 from sebastiankrll/performance/web

Performance/web

Author: sebastiankrll

apps/web/app/globals.css

@@ -35,6 +35,7 @@ html {
 	--color-magenta: rgb(222, 89, 234);
 	--color-glass-bg: rgba(255, 255, 255, 0.5);
 	--color-hover: rgb(77, 95, 131);
+	--box-shadow: 1px 1px 5px 1px var(--color-box-shadow);
 }
 
 [data-theme="dark"] {

apps/web/components/Header/Header.tsx

@@ -7,13 +7,17 @@ import { signIn, useSession } from "next-auth/react";
 import { useEffect, useRef, useState } from "react";
 import simradar24Logo from "@/assets/images/logos/Simradar21_Logo.svg";
 import VatsimLogo from "@/assets/images/logos/VATSIM_Logo_Only.png";
+import useSettings from "@/hooks/useSettings";
 import Navigation from "./Navigation";
 
 export default function Header() {
 	const [open, setOpen] = useState(false);
 	const headerRef = useRef<HTMLElement>(null);
+
 	const { data: session } = useSession();
 
+	useSettings();
+
 	useEffect(() => {
 		function handleClickOutside(event: MouseEvent) {
 			if (headerRef.current && !headerRef.current.contains(event.target as Node)) {

apps/web/components/Initializer/Initializer.css

@@ -0,0 +1,45 @@
+#initializer {
+	position: absolute;
+	top: -5rem;
+	left: 50%;
+	transform: translateX(-50%);
+	background-color: var(--color-blue);
+	width: 20rem;
+	z-index: 1000;
+	box-shadow: var(--box-shadow);
+	padding: 0.5rem 1rem;
+	transition: all 0.5s ease;
+	opacity: 0;
+}
+
+#initializer.open {
+	top: 4.5rem;
+	opacity: 1;
+}
+
+#initializer p {
+	color: white;
+}
+
+#initializer-title {
+	font-weight: 700;
+}
+
+#initializer-disclaimer {
+	font-size: 14px;
+}
+
+#initializer-text {
+	margin-top: 10px;
+	font-size: 12px;
+}
+
+#initializer-progress {
+	position: absolute;
+	left: 0;
+	top: 0;
+	background: var(--color-green);
+	width: 0%;
+	height: 100%;
+	z-index: -1;
+}

apps/web/components/Initializer/Initializer.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { initCache } from "@/storage/cache";
+import "./Initializer.css";
+import { usePathname } from "next/navigation";
+import type { StatusMap } from "@/types/initializer";
+
+function getInitializerText(status: StatusMap): string {
+	if (!status.airports) {
+		return "Downloading airport data ...";
+	} else if (!status.firs) {
+		return "Downloading VAT-Spy data ...";
+	} else if (!status.tracons) {
+		return "Downloading SimAware data ...";
+	} else if (!status.airlines) {
+		return "Downloading airline data ...";
+	} else if (!status.cache) {
+		return "Initializing local cache ...";
+	} else if (!status.map) {
+		return "Setting up map ...";
+	} else {
+		return "Initialization complete!";
+	}
+}
+
+export default function Initializer() {
+	const [open, setOpen] = useState(true);
+	const [visible, setVisible] = useState(true);
+	const [status, setStatus] = useState<StatusMap>({});
+	const pathname = usePathname();
+
+	useEffect(() => {
+		initCache(setStatus, pathname);
+		return () => {};
+	}, [pathname]);
+
+	useEffect(() => {
+		if (status.airports && status.firs && status.tracons && status.airlines && status.cache && status.map) {
+			setOpen(false);
+			setTimeout(() => setVisible(false), 500);
+		}
+	}, [status]);
+
+	if (!visible) {
+		return null;
+	}
+
+	return (
+		<div id="initializer" className={open ? "open" : ""}>
+			<span id="initializer-progress" style={{ width: `${(Object.keys(status).length / 6) * 100}%` }}></span>
+			<p id="initializer-title">Initializing data ...</p>
+			<p id="initializer-disclaimer">This can take up to a minute during the first load.</p>
+			<p id="initializer-text">{getInitializerText(status)}</p>
+		</div>
+	);
+}

apps/web/components/Loader/Loader.css

@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
 import { ToastContainer } from "react-toastify";
 import { useSettingsStore } from "@/storage/zustand";
-import Loader from "../Loader/Loader";
+import Initializer from "../Initializer/Initializer";
 import { MessageBoxCloseButton } from "../MessageBox/MessageBox";
 import BasePanel from "../Panels/BasePanel";
 import MapControls from "./components/MapControls";
@@ -18,6 +18,7 @@ import { setSunLayerSettings } from "./utils/sunLayer";
 
 export default function OMap({ children }: { children?: React.ReactNode }) {
 	const router = useRouter();
+
 	const { theme } = useTheme();
 	const {
 		dayNightLayer,
@@ -99,7 +100,7 @@ export default function OMap({ children }: { children?: React.ReactNode }) {
 	return (
 		<>
 			<ToastContainer closeButton={MessageBoxCloseButton} icon={false} theme="colored" />
-			<Loader />
+			<Initializer />
 			<BasePanel>{children}</BasePanel>
 			<MapControls />
 			<div id="map" />

apps/web/components/Loader/Loader.tsx

@@ -220,7 +220,7 @@ export function animatePilotFeatures(map: OlMap) {
 			feature.set("latitude", newLat, true);
 			feature.set("longitude", newLon, true);
 		});
-		map.render();
+		
 		animateOverlays();
 		animateTrackFeatures();
 

apps/web/components/Map/Map.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { useTheme } from "next-themes";
+import { useEffect } from "react";
+import { useSettingsStore } from "@/storage/zustand";
+
+export default function useSettings() {
+	const { setTheme } = useTheme();
+	const { theme: settingsTheme, setSettings } = useSettingsStore();
+	const { data: session } = useSession();
+
+	useEffect(() => {
+		setTheme(settingsTheme);
+	}, [settingsTheme, setTheme]);
+
+	useEffect(() => {
+		if (!session) return;
+
+		const fetchUserSettings = async () => {
+			try {
+				const res = await fetch("/user/settings", { cache: "no-store" });
+				if (!res.ok) {
+					return;
+				}
+
+				const data = await res.json();
+				setSettings(data.settings);
+			} catch (err) {
+				console.error("Failed to load settings:", err);
+			}
+		};
+
+		fetchUserSettings();
+	}, [setSettings, session]);
+}