Fix complete frontend reload from links in profile menu.\n Improved loading spinner timing

Signed-off-by: Ronni Skansing <rskansing@gmail.com>

frontend/src/lib/components/header/MobileMenu.svelte

@@ -220,7 +220,7 @@
 								: 'hover:bg-highlight-blue/30 hover:shadow-md dark:hover:bg-highlight-blue/20'}"
 							class:hidden={shouldHideMenuItem(link.route)}
 							on:click={() => (visible = false)}
-							target={link.external ? '_blank' : '_self'}
+							target={link.external ? '_blank' : undefined}
 							rel={link.external ? 'noreferrer' : undefined}
 							href={link.route}
 						>

frontend/src/lib/components/header/ProfileMenu.svelte

@@ -119,7 +119,7 @@
 							? 'bg-active-blue shadow-md dark:bg-active-blue'
 							: 'hover:shadow-md hover:bg-highlight-blue/80 dark:hover:bg-highlight-blue/20'}"
 						class:hidden={shouldHideMenuItem(item.route)}
-						target={item.external ? '_blank' : '_self'}
+						target={item.external ? '_blank' : undefined}
 						rel={item.external ? 'noreferrer' : undefined}
 						draggable="false"
 						on:click={() => {

frontend/src/lib/store/loading.js

@@ -1,11 +1,25 @@
-import { writable } from 'svelte/store';
+import { writable, derived } from 'svelte/store';
 
-export const isLoading = writable(false);
+// manual loading state (from explicit showIsLoading/hideIsLoading calls)
+const manualLoading = writable(false);
+
+// navigation loading state (from sveltekit navigation)
+export const navigationLoading = writable(false);
+
+// combined loading state - true if either manual or navigation is loading
+export const isLoading = derived(
+	[manualLoading, navigationLoading],
+	([$manual, $navigation]) => $manual || $navigation
+);
 
 export const showIsLoading = () => {
-	isLoading.set(true);
+	manualLoading.set(true);
 };
 
 export const hideIsLoading = () => {
-	isLoading.set(false);
+	manualLoading.set(false);
+};
+
+export const setNavigationLoading = (value) => {
+	navigationLoading.set(value);
 };

frontend/src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script>
 	import '../app.css';
 	import { onMount, tick } from 'svelte';
-	import { page } from '$app/stores';
+	import { page, navigating } from '$app/stores';
 	import { beforeNavigate, goto } from '$app/navigation';
 
 	import { Session } from '$lib/service/session';
@@ -16,7 +16,7 @@
 	import ChangeCompanyModal from '$lib/components/modal/ChangeCompanyModal.svelte';
 	import CommandPalette from '$lib/components/modal/CommandPalette.svelte';
 	import DesktopMenu from '$lib/components/header/DesktopMenu.svelte';
-	import { hideIsLoading, showIsLoading } from '$lib/store/loading';
+	import { hideIsLoading, showIsLoading, setNavigationLoading } from '$lib/store/loading';
 	import Header from '$lib/components/header/Header.svelte';
 	import { setupTheme, setupOSThemeListener } from '$lib/theme.js';
 	import { displayMode } from '$lib/store/displayMode';
@@ -64,6 +64,9 @@
 		}
 	});
 
+	// show loading spinner during navigation
+	$: setNavigationLoading(!!$navigating);
+
 	onMount(() => {
 		// initialize theme system
 		setupTheme();