components/app-shell/QuickNav.jsx

@@ -3,7 +3,7 @@
 import React from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { FolderOpen, Search as SearchIcon } from "lucide-react";
+import { FolderOpen, Search as SearchIcon, TriangleAlert } from "lucide-react";
 
 import { useAuth } from "@/components/auth/authContext";
 import { getBranches } from "@/lib/frontend/apiClient";
@@ -40,8 +40,15 @@ const BRANCH_LIST_STATE = Object.freeze({
 	ERROR: "error",
 });
 
+// Header polish:
+// - outline buttons normally have a subtle shadow; remove it for crisp header UI
+// - normalize padding when an icon is present (avoid "uneven" look)
+const TOPNAV_BUTTON_CLASS = "shadow-none has-[>svg]:px-3";
+
+// Active nav style (blue like multi-branch selection)
 const ACTIVE_NAV_BUTTON_CLASS =
-	"border-blue-600 bg-blue-50 hover:bg-blue-50 dark:border-blue-900 dark:bg-blue-950 dark:hover:bg-blue-950";
+	"border-blue-600 bg-blue-50 text-blue-900 hover:bg-blue-50 " +
+	"dark:border-blue-900 dark:bg-blue-950 dark:text-blue-50 dark:hover:bg-blue-950";
 
 export default function QuickNav() {
 	const router = useRouter();
@@ -80,11 +87,12 @@ export default function QuickNav() {
 			? branchList.branches
 			: null;
 
-	const isKnownRouteBranch = React.useMemo(() => {
-		if (!routeBranch) return false;
-		if (!knownBranches) return false;
-		return knownBranches.includes(routeBranch);
-	}, [routeBranch, knownBranches]);
+	const hasInvalidRouteBranch = Boolean(
+		isAdminDev &&
+		routeBranch &&
+		knownBranches &&
+		!knownBranches.includes(routeBranch),
+	);
 
 	React.useEffect(() => {
 		if (!isAuthenticated) return;
@@ -141,14 +149,17 @@ export default function QuickNav() {
 
 	React.useEffect(() => {
 		if (!isAdminDev) return;
-		if (!isKnownRouteBranch) return;
 		if (!routeBranch) return;
+		if (!knownBranches) return;
+
+		const isKnownRouteBranch = knownBranches.includes(routeBranch);
+		if (!isKnownRouteBranch) return;
 
 		if (routeBranch !== selectedBranch) {
 			setSelectedBranch(routeBranch);
 			safeWriteLocalStorageBranch(STORAGE_KEY_LAST_BRANCH, routeBranch);
 		}
-	}, [isAdminDev, isKnownRouteBranch, routeBranch, selectedBranch]);
+	}, [isAdminDev, routeBranch, knownBranches, selectedBranch]);
 
 	React.useEffect(() => {
 		if (!isAdminDev) return;
@@ -188,6 +199,10 @@ export default function QuickNav() {
 		router.push(nextUrl);
 	}
 
+	const branchButtonTitle = hasInvalidRouteBranch
+		? `Achtung: Die URL-Niederlassung ${routeBranch} existiert nicht. Bitte eine gültige Niederlassung wählen.`
+		: "Niederlassung auswählen";
+
 	return (
 		<div className="hidden items-center gap-2 md:flex">
 			{isAdminDev ? (
@@ -197,9 +212,16 @@ export default function QuickNav() {
 							variant="outline"
 							size="sm"
 							type="button"
-							title="Niederlassung auswählen"
+							title={branchButtonTitle}
+							className={TOPNAV_BUTTON_CLASS}
 						>
 							{canNavigate ? effectiveBranch : "Niederlassung wählen"}
+							{hasInvalidRouteBranch ? (
+								<TriangleAlert
+									className="h-4 w-4 text-destructive"
+									aria-hidden="true"
+								/>
+							) : null}
 						</Button>
 					</DropdownMenuTrigger>
 
@@ -207,6 +229,16 @@ export default function QuickNav() {
 						<DropdownMenuLabel>Niederlassung</DropdownMenuLabel>
 						<DropdownMenuSeparator />
 
+						{hasInvalidRouteBranch ? (
+							<>
+								<div className="px-2 py-2 text-xs text-destructive">
+									Die URL-Niederlassung <strong>{routeBranch}</strong> existiert
+									nicht. Bitte wählen Sie eine gültige Niederlassung aus.
+								</div>
+								<DropdownMenuSeparator />
+							</>
+						) : null}
+
 						{branchList.status === BRANCH_LIST_STATE.ERROR ? (
 							<div className="px-2 py-2 text-xs text-muted-foreground">
 								Konnte nicht geladen werden.
@@ -242,7 +274,10 @@ export default function QuickNav() {
 				size="sm"
 				asChild
 				disabled={!canNavigate}
-				className={isExplorerActive ? ACTIVE_NAV_BUTTON_CLASS : ""}
+				className={[
+					TOPNAV_BUTTON_CLASS,
+					isExplorerActive ? ACTIVE_NAV_BUTTON_CLASS : "",
+				].join(" ")}
 			>
 				<Link
 					href={canNavigate ? branchPath(effectiveBranch) : "#"}
@@ -259,7 +294,10 @@ export default function QuickNav() {
 				size="sm"
 				asChild
 				disabled={!canNavigate}
-				className={isSearchActive ? ACTIVE_NAV_BUTTON_CLASS : ""}
+				className={[
+					TOPNAV_BUTTON_CLASS,
+					isSearchActive ? ACTIVE_NAV_BUTTON_CLASS : "",
+				].join(" ")}
 			>
 				<Link
 					href={canNavigate ? searchPath(effectiveBranch) : "#"}

components/app-shell/SessionIndicator.jsx

@@ -4,23 +4,22 @@ import React from "react";
 import { Loader2 } from "lucide-react";
 
 import { useAuth } from "@/components/auth/authContext";
+import { useDebouncedVisibility } from "@/lib/frontend/hooks/useDebouncedVisibility";
 
-/**
- * SessionIndicator (RHL-032)
- *
- * Shows a small inline indicator when:
- * - the initial session check is running (status === "loading")
- * - a background revalidation is running (isValidating === true)
- *
- * UX:
- * - Keep it subtle and non-blocking.
- * - Text is German.
- */
 export default function SessionIndicator() {
 	const { status, isValidating } = useAuth();
 
-	const show = status === "loading" || Boolean(isValidating);
-	if (!show) return null;
+	const isActive = status === "loading" || Boolean(isValidating);
+
+	// Debounce policy:
+	// - Show only if it lasts longer than 200ms.
+	// - Once shown, keep it visible for at least 250ms to avoid blinking.
+	const visible = useDebouncedVisibility(isActive, {
+		delayMs: 200,
+		minVisibleMs: 250,
+	});
+
+	if (!visible) return null;
 
 	return (
 		<div

components/app-shell/ThemeToggleButton.jsx

@@ -5,13 +5,18 @@ import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 
 import { Button } from "@/components/ui/button";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 export default function ThemeToggleButton() {
 	const { setTheme } = useTheme();
 
 	function toggleTheme() {
-		// We intentionally read the current state from the DOM class to avoid
-		// hydration-unsafe theme reads during SSR/SSG. :contentReference[oaicite:2]{index=2}
+		// Read current theme from the DOM class to avoid hydration-unsafe theme reads.
 		const isDark =
 			typeof document !== "undefined" &&
 			document.documentElement.classList.contains("dark");
@@ -20,21 +25,28 @@ export default function ThemeToggleButton() {
 	}
 
 	return (
-		<Button
-			type="button"
-			variant="ghost"
-			size="icon-sm"
-			onClick={toggleTheme}
-			aria-label="Design umschalten"
-			title="Design umschalten"
-		>
-			{/* Light mode: show Moon (switch to dark) */}
-			<Moon className="h-4 w-4 dark:hidden" aria-hidden="true" />
-
-			{/* Dark mode: show Sun (switch to light) */}
-			<Sun className="hidden h-4 w-4 dark:block" aria-hidden="true" />
-
-			<span className="sr-only">Design umschalten</span>
-		</Button>
+		<TooltipProvider delayDuration={200}>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<Button
+						type="button"
+						variant="ghost"
+						size="icon-sm"
+						onClick={toggleTheme}
+						aria-label="Design umschalten"
+					>
+						{/* Light mode: show Moon (switch to dark) */}
+						<Moon className="h-4 w-4 dark:hidden" aria-hidden="true" />
+
+						{/* Dark mode: show Sun (switch to light) */}
+						<Sun className="hidden h-4 w-4 dark:block" aria-hidden="true" />
+
+						<span className="sr-only">Design umschalten</span>
+					</Button>
+				</TooltipTrigger>
+
+				<TooltipContent side="bottom">Design umschalten</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
 	);
 }

components/app-shell/TopNav.jsx

@@ -9,7 +9,7 @@ import SessionIndicator from "@/components/app-shell/SessionIndicator";
 
 export default function TopNav() {
 	return (
-		<header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur">
+		<header className="sticky top-0 z-50 w-full border-b bg-background">
 			<div className="px-4">
 				<div className="mx-auto grid h-14 w-full items-center 2xl:grid-cols-[1fr_minmax(0,45%)_1fr]">
 					<div className="flex items-center justify-between gap-4 2xl:col-start-2">
@@ -45,11 +45,8 @@ export default function TopNav() {
 						</div>
 
 						<div className="flex items-center gap-3">
-							{/* New: inline session validation indicator (no content flicker) */}
-							<SessionIndicator />
-
 							<ThemeToggleButton />
-
+							<SessionIndicator />
 							<UserStatus />
 						</div>
 					</div>

components/explorer/levels/DaysExplorer.jsx

@@ -10,6 +10,7 @@ import { sortNumericStringsDesc } from "@/lib/frontend/explorer/sorters";
 import { mapExplorerError } from "@/lib/frontend/explorer/errorMapping";
 import { buildLoginUrl, LOGIN_REASONS } from "@/lib/frontend/authRedirect";
 import { useExplorerQuery } from "@/lib/frontend/hooks/useExplorerQuery";
+import { useDebouncedVisibility } from "@/lib/frontend/hooks/useDebouncedVisibility";
 
 import ExplorerBreadcrumbs from "@/components/explorer/breadcrumbs/ExplorerBreadcrumbs";
 import ExplorerPageShell from "@/components/explorer/ExplorerPageShell";
@@ -22,18 +23,12 @@ import ExplorerNotFound from "@/components/explorer/states/ExplorerNotFound";
 import ForbiddenView from "@/components/system/ForbiddenView";
 import { Button } from "@/components/ui/button";
 
-/**
- * DaysExplorer
- *
- * Explorer level: days for a given branch/year/month.
- * Loads years + months for breadcrumb dropdowns (fail-open).
- *
- * @param {{ branch: string, year: string, month: string }} props
- */
+const LOADING_DELAY_MS = 300;
+
 export default function DaysExplorer({ branch, year, month }) {
 	const daysLoadFn = React.useCallback(
 		() => getDays(branch, year, month),
-		[branch, year, month]
+		[branch, year, month],
 	);
 	const daysQuery = useExplorerQuery(daysLoadFn, [daysLoadFn]);
 
@@ -42,15 +37,20 @@ export default function DaysExplorer({ branch, year, month }) {
 
 	const monthsLoadFn = React.useCallback(
 		() => getMonths(branch, year),
-		[branch, year]
+		[branch, year],
 	);
 	const monthsQuery = useExplorerQuery(monthsLoadFn, [monthsLoadFn]);
 
 	const mapped = React.useMemo(
 		() => mapExplorerError(daysQuery.error),
-		[daysQuery.error]
+		[daysQuery.error],
 	);
 
+	const showLoadingUi = useDebouncedVisibility(daysQuery.status === "loading", {
+		delayMs: LOADING_DELAY_MS,
+		minVisibleMs: 0,
+	});
+
 	React.useEffect(() => {
 		if (mapped?.kind !== "unauthenticated") return;
 
@@ -60,7 +60,7 @@ export default function DaysExplorer({ branch, year, month }) {
 				: monthPath(branch, year, month);
 
 		window.location.replace(
-			buildLoginUrl({ reason: LOGIN_REASONS.EXPIRED, next })
+			buildLoginUrl({ reason: LOGIN_REASONS.EXPIRED, next }),
 		);
 	}, [mapped?.kind, branch, year, month]);
 
@@ -100,7 +100,7 @@ export default function DaysExplorer({ branch, year, month }) {
 		</Button>
 	);
 
-	if (daysQuery.status === "loading") {
+	if (showLoadingUi) {
 		return (
 			<ExplorerPageShell
 				title="Tage"
@@ -115,6 +115,19 @@ export default function DaysExplorer({ branch, year, month }) {
 		);
 	}
 
+	if (daysQuery.status === "loading") {
+		return (
+			<ExplorerPageShell
+				title="Tage"
+				description="Wählen Sie einen Tag aus."
+				breadcrumbs={breadcrumbsNode}
+				actions={actions}
+			>
+				<div className="h-16" aria-hidden="true" />
+			</ExplorerPageShell>
+		);
+	}
+
 	if (daysQuery.status === "error" && mapped) {
 		if (mapped.kind === "forbidden")
 			return <ForbiddenView attemptedBranch={branch} />;
@@ -142,12 +155,7 @@ export default function DaysExplorer({ branch, year, month }) {
 					description="Sitzung abgelaufen — Weiterleitung zum Login…"
 					breadcrumbs={breadcrumbsNode}
 				>
-					<ExplorerSectionCard
-						title="Weiterleitung"
-						description="Bitte warten…"
-					>
-						<ExplorerLoading variant="grid" count={6} />
-					</ExplorerSectionCard>
+					<div className="h-16" aria-hidden="true" />
 				</ExplorerPageShell>
 			);
 		}

components/explorer/levels/FilesExplorer.jsx

@@ -14,6 +14,7 @@ import { sortFilesByNameAsc } from "@/lib/frontend/explorer/sorters";
 import { mapExplorerError } from "@/lib/frontend/explorer/errorMapping";
 import { buildLoginUrl, LOGIN_REASONS } from "@/lib/frontend/authRedirect";
 import { useExplorerQuery } from "@/lib/frontend/hooks/useExplorerQuery";
+import { useDebouncedVisibility } from "@/lib/frontend/hooks/useDebouncedVisibility";
 import { buildPdfUrl } from "@/lib/frontend/explorer/pdfUrl";
 
 import ExplorerBreadcrumbs from "@/components/explorer/breadcrumbs/ExplorerBreadcrumbs";
@@ -36,18 +37,12 @@ import {
 	TableCaption,
 } from "@/components/ui/table";
 
-/**
- * FilesExplorer
- *
- * Explorer leaf level: lists files (PDFs) for a day.
- * Loads years/months/days for breadcrumb dropdowns (fail-open).
- *
- * @param {{ branch: string, year: string, month: string, day: string }} props
- */
+const LOADING_DELAY_MS = 300;
+
 export default function FilesExplorer({ branch, year, month, day }) {
 	const filesLoadFn = React.useCallback(
 		() => getFiles(branch, year, month, day),
-		[branch, year, month, day]
+		[branch, year, month, day],
 	);
 	const filesQuery = useExplorerQuery(filesLoadFn, [filesLoadFn]);
 
@@ -56,19 +51,27 @@ export default function FilesExplorer({ branch, year, month, day }) {
 
 	const monthsLoadFn = React.useCallback(
 		() => getMonths(branch, year),
-		[branch, year]
+		[branch, year],
 	);
 	const monthsQuery = useExplorerQuery(monthsLoadFn, [monthsLoadFn]);
 
 	const daysLoadFn = React.useCallback(
 		() => getDays(branch, year, month),
-		[branch, year, month]
+		[branch, year, month],
 	);
 	const daysQuery = useExplorerQuery(daysLoadFn, [daysLoadFn]);
 
 	const mapped = React.useMemo(
 		() => mapExplorerError(filesQuery.error),
-		[filesQuery.error]
+		[filesQuery.error],
+	);
+
+	const showLoadingUi = useDebouncedVisibility(
+		filesQuery.status === "loading",
+		{
+			delayMs: LOADING_DELAY_MS,
+			minVisibleMs: 0,
+		},
 	);
 
 	React.useEffect(() => {
@@ -80,7 +83,7 @@ export default function FilesExplorer({ branch, year, month, day }) {
 				: dayPath(branch, year, month, day);
 
 		window.location.replace(
-			buildLoginUrl({ reason: LOGIN_REASONS.EXPIRED, next })
+			buildLoginUrl({ reason: LOGIN_REASONS.EXPIRED, next }),
 		);
 	}, [mapped?.kind, branch, year, month, day]);
 
@@ -128,7 +131,7 @@ export default function FilesExplorer({ branch, year, month, day }) {
 		</Button>
 	);
 
-	if (filesQuery.status === "loading") {
+	if (showLoadingUi) {
 		return (
 			<ExplorerPageShell
 				title="Dateien"
@@ -143,6 +146,19 @@ export default function FilesExplorer({ branch, year, month, day }) {
 		);
 	}
 
+	if (filesQuery.status === "loading") {
+		return (
+			<ExplorerPageShell
+				title="Dateien"
+				description="Lieferscheine für den ausgewählten Tag."
+				breadcrumbs={breadcrumbsNode}
+				actions={actions}
+			>
+				<div className="h-16" aria-hidden="true" />
+			</ExplorerPageShell>
+		);
+	}
+
 	if (filesQuery.status === "error" && mapped) {
 		if (mapped.kind === "forbidden")
 			return <ForbiddenView attemptedBranch={branch} />;
@@ -170,12 +186,7 @@ export default function FilesExplorer({ branch, year, month, day }) {
 					description="Sitzung abgelaufen — Weiterleitung zum Login…"
 					breadcrumbs={breadcrumbsNode}
 				>
-					<ExplorerSectionCard
-						title="Weiterleitung"
-						description="Bitte warten…"
-					>
-						<ExplorerLoading variant="table" count={6} />
-					</ExplorerSectionCard>
+					<div className="h-16" aria-hidden="true" />
 				</ExplorerPageShell>
 			);
 		}

components/explorer/levels/MonthsExplorer.jsx

@@ -11,6 +11,7 @@ import { formatMonthLabel } from "@/lib/frontend/explorer/formatters";
 import { mapExplorerError } from "@/lib/frontend/explorer/errorMapping";
 import { buildLoginUrl, LOGIN_REASONS } from "@/lib/frontend/authRedirect";
 import { useExplorerQuery } from "@/lib/frontend/hooks/useExplorerQuery";
+import { useDebouncedVisibility } from "@/lib/frontend/hooks/useDebouncedVisibility";
 
 import ExplorerBreadcrumbs from "@/components/explorer/breadcrumbs/ExplorerBreadcrumbs";
 import ExplorerPageShell from "@/components/explorer/ExplorerPageShell";
@@ -23,18 +24,12 @@ import ExplorerNotFound from "@/components/explorer/states/ExplorerNotFound";
 import ForbiddenView from "@/components/system/ForbiddenView";
 import { Button } from "@/components/ui/button";
 
-/**
- * MonthsExplorer
- *
- * Explorer level: months for a given branch/year.
- * Loads available years for the breadcrumb dropdown (fail-open).
- *
- * @param {{ branch: string, year: string }} props
- */
+const LOADING_DELAY_MS = 300;
+
 export default function MonthsExplorer({ branch, year }) {
 	const monthsLoadFn = React.useCallback(
 		() => getMonths(branch, year),
-		[branch, year]
+		[branch, year],
 	);
 	const monthsQuery = useExplorerQuery(monthsLoadFn, [monthsLoadFn]);
 
@@ -43,7 +38,15 @@ export default function MonthsExplorer({ branch, year }) {
 
 	const mapped = React.useMemo(
 		() => mapExplorerError(monthsQuery.error),
-		[monthsQuery.error]
+		[monthsQuery.error],
+	);
+
+	const showLoadingUi = useDebouncedVisibility(
+		monthsQuery.status === "loading",
+		{
+			delayMs: LOADING_DELAY_MS,
+			minVisibleMs: 0,
+		},
 	);
 
 	React.useEffect(() => {
@@ -55,7 +58,7 @@ export default function MonthsExplorer({ branch, year }) {
 				: yearPath(branch, year);
 
 		window.location.replace(
-			buildLoginUrl({ reason: LOGIN_REASONS.EXPIRED, next })
+			buildLoginUrl({ reason: LOGIN_REASONS.EXPIRED, next }),
 		);
 	}, [mapped?.kind, branch, year]);
 
@@ -87,7 +90,7 @@ export default function MonthsExplorer({ branch, year }) {
 		</Button>
 	);
 
-	if (monthsQuery.status === "loading") {
+	if (showLoadingUi) {
 		return (
 			<ExplorerPageShell
 				title="Monate"
@@ -105,6 +108,19 @@ export default function MonthsExplorer({ branch, year }) {
 		);
 	}
 
+	if (monthsQuery.status === "loading") {
+		return (
+			<ExplorerPageShell
+				title="Monate"
+				description="Wählen Sie einen Monat aus."
+				breadcrumbs={breadcrumbsNode}
+				actions={actions}
+			>
+				<div className="h-16" aria-hidden="true" />
+			</ExplorerPageShell>
+		);
+	}
+
 	if (monthsQuery.status === "error" && mapped) {
 		if (mapped.kind === "forbidden")
 			return <ForbiddenView attemptedBranch={branch} />;
@@ -132,12 +148,7 @@ export default function MonthsExplorer({ branch, year }) {
 					description="Sitzung abgelaufen — Weiterleitung zum Login…"
 					breadcrumbs={breadcrumbsNode}
 				>
-					<ExplorerSectionCard
-						title="Weiterleitung"
-						description="Bitte warten…"
-					>
-						<ExplorerLoading variant="grid" count={6} />
-					</ExplorerSectionCard>
+					<div className="h-16" aria-hidden="true" />
 				</ExplorerPageShell>
 			);
 		}

components/explorer/levels/YearsExplorer.jsx

@@ -10,6 +10,7 @@ import { sortNumericStringsDesc } from "@/lib/frontend/explorer/sorters";
 import { mapExplorerError } from "@/lib/frontend/explorer/errorMapping";
 import { buildLoginUrl, LOGIN_REASONS } from "@/lib/frontend/authRedirect";
 import { useExplorerQuery } from "@/lib/frontend/hooks/useExplorerQuery";
+import { useDebouncedVisibility } from "@/lib/frontend/hooks/useDebouncedVisibility";
 
 import ExplorerBreadcrumbs from "@/components/explorer/breadcrumbs/ExplorerBreadcrumbs";
 import ExplorerPageShell from "@/components/explorer/ExplorerPageShell";
@@ -22,19 +23,19 @@ import ExplorerNotFound from "@/components/explorer/states/ExplorerNotFound";
 import ForbiddenView from "@/components/system/ForbiddenView";
 import { Button } from "@/components/ui/button";
 
-/**
- * YearsExplorer
- *
- * Explorer entry level for a branch: shows available years.
- *
- * @param {{ branch: string }} props
- */
+const LOADING_DELAY_MS = 300;
+
 export default function YearsExplorer({ branch }) {
 	const loadFn = React.useCallback(() => getYears(branch), [branch]);
 	const { status, data, error, retry } = useExplorerQuery(loadFn, [loadFn]);
 
 	const mapped = React.useMemo(() => mapExplorerError(error), [error]);
 
+	const showLoadingUi = useDebouncedVisibility(status === "loading", {
+		delayMs: LOADING_DELAY_MS,
+		minVisibleMs: 0,
+	});
+
 	React.useEffect(() => {
 		if (mapped?.kind !== "unauthenticated") return;
 
@@ -44,7 +45,7 @@ export default function YearsExplorer({ branch }) {
 				: branchPath(branch);
 
 		window.location.replace(
-			buildLoginUrl({ reason: LOGIN_REASONS.EXPIRED, next })
+			buildLoginUrl({ reason: LOGIN_REASONS.EXPIRED, next }),
 		);
 	}, [mapped?.kind, branch]);
 
@@ -57,7 +58,7 @@ export default function YearsExplorer({ branch }) {
 		</Button>
 	);
 
-	if (status === "loading") {
+	if (showLoadingUi) {
 		return (
 			<ExplorerPageShell
 				title="Jahre"
@@ -72,9 +73,23 @@ export default function YearsExplorer({ branch }) {
 		);
 	}
 
+	if (status === "loading") {
+		return (
+			<ExplorerPageShell
+				title="Jahre"
+				description="Wählen Sie ein Jahr, um die Lieferscheine anzuzeigen."
+				breadcrumbs={breadcrumbsNode}
+				actions={actions}
+			>
+				<div className="h-16" aria-hidden="true" />
+			</ExplorerPageShell>
+		);
+	}
+
 	if (status === "error" && mapped) {
-		if (mapped.kind === "forbidden")
+		if (mapped.kind === "forbidden") {
 			return <ForbiddenView attemptedBranch={branch} />;
+		}
 
 		if (mapped.kind === "notfound") {
 			return (
@@ -96,12 +111,7 @@ export default function YearsExplorer({ branch }) {
 					description="Sitzung abgelaufen — Weiterleitung zum Login…"
 					breadcrumbs={breadcrumbsNode}
 				>
-					<ExplorerSectionCard
-						title="Weiterleitung"
-						description="Bitte warten…"
-					>
-						<ExplorerLoading variant="grid" count={6} />
-					</ExplorerSectionCard>
+					<div className="h-16" aria-hidden="true" />
 				</ExplorerPageShell>
 			);
 		}

components/explorer/states/ExplorerLoading.jsx

@@ -4,8 +4,8 @@ import { Skeleton } from "@/components/ui/skeleton";
 /**
  * ExplorerLoading
  *
- * Loading placeholder for Explorer lists.
- * Supports a grid and a table-like variant.
+ * Pure skeleton layout for Explorer lists.
+ * We debounce the decision to render loading UI in the parent components.
  *
  * @param {{ variant?: "grid"|"table", count?: number }} props
  */

components/search/SearchResults.jsx

@@ -14,10 +14,13 @@ import {
 	sortSearchItems,
 	SEARCH_RESULTS_SORT,
 } from "@/lib/frontend/search/resultsSorting";
+import { useDebouncedVisibility } from "@/lib/frontend/hooks/useDebouncedVisibility";
 
 import SearchResultsToolbar from "@/components/search/SearchResultsToolbar";
 import SearchResultsTable from "@/components/search/SearchResultsTable";
 
+const LOADING_DELAY_MS = 300;
+
 export default function SearchResults({
 	branch,
 	status,
@@ -33,6 +36,11 @@ export default function SearchResults({
 }) {
 	const [sortMode, setSortMode] = React.useState(SEARCH_RESULTS_SORT.RELEVANCE);
 
+	const showLoadingUi = useDebouncedVisibility(status === "loading", {
+		delayMs: LOADING_DELAY_MS,
+		minVisibleMs: 0,
+	});
+
 	const sortedItems = React.useMemo(() => {
 		return sortSearchItems(items, sortMode);
 	}, [items, sortMode]);
@@ -57,13 +65,8 @@ export default function SearchResults({
 		);
 	}
 
-	if (status === "loading") {
-		return <ExplorerLoading variant="table" count={8} />;
-	}
-
 	if (status === "error" && error) {
 		// Validation errors are rendered in the SearchForm (near the inputs).
-		// We avoid showing a second alert in the results.
 		if (error.kind === "validation") {
 			return (
 				<ExplorerEmpty
@@ -83,6 +86,15 @@ export default function SearchResults({
 		);
 	}
 
+	// Debounced loading UI:
+	// - If loading is very fast, do not show skeletons (prevents flicker).
+	if (showLoadingUi) {
+		return <ExplorerLoading variant="table" count={8} />;
+	}
+	if (status === "loading") {
+		return <div className="h-16" aria-hidden="true" />;
+	}
+
 	const list = Array.isArray(sortedItems) ? sortedItems : [];
 
 	if (list.length === 0) {

components/search/form/SearchDateRangePicker.jsx

@@ -15,16 +15,16 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "@/components/ui/popover";
-import { Skeleton } from "@/components/ui/skeleton";
 
 import { useSearchDateRangePicker } from "@/lib/frontend/search/useSearchDateRangePicker";
+import { DebouncedSkeleton } from "@/components/ui/debounced-skeleton";
 
 function CalendarLoading() {
 	return (
 		<div className="space-y-3">
 			<div className="flex gap-4">
-				<Skeleton className="h-72 w-72" />
-				<Skeleton className="h-72 w-72" />
+				<DebouncedSkeleton className="h-72 w-72 rounded-md" />
+				<DebouncedSkeleton className="h-72 w-72 rounded-md" />
 			</div>
 			<p className="text-xs text-muted-foreground text-center">
 				Kalender lädt…

components/search/form/SearchMultiBranchPicker.jsx

@@ -10,7 +10,8 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Skeleton } from "@/components/ui/skeleton";
+
+import { DebouncedSkeleton } from "@/components/ui/debounced-skeleton";
 
 function normalizeTypedBranch(value) {
 	if (typeof value !== "string") return null;
@@ -37,7 +38,7 @@ export default function SearchMultiBranchPicker({
 	const selected = Array.isArray(selectedBranches) ? selectedBranches : [];
 	const selectedSet = React.useMemo(
 		() => new Set(selected.map(String)),
-		[selected]
+		[selected],
 	);
 
 	const canClearAll =
@@ -83,8 +84,8 @@ export default function SearchMultiBranchPicker({
 					<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-5">
 						{Array.from({ length: 15 }).map((_, i) => (
 							<div key={i} className="flex items-center gap-2">
-								<Skeleton className="h-4 w-4" />
-								<Skeleton className="h-4 w-14" />
+								<DebouncedSkeleton className="h-4 w-4 rounded-md" />
+								<DebouncedSkeleton className="h-4 w-14 rounded-md" />
 							</div>
 						))}
 					</div>

components/search/form/SearchSingleBranchCombobox.jsx

@@ -9,7 +9,7 @@ import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Skeleton } from "@/components/ui/skeleton";
+
 import {
 	Popover,
 	PopoverContent,
@@ -23,6 +23,7 @@ import {
 	CommandItem,
 	CommandList,
 } from "@/components/ui/command";
+import { DebouncedSkeleton } from "@/components/ui/debounced-skeleton";
 
 function normalizeTypedBranch(value) {
 	if (typeof value !== "string") return null;
@@ -100,7 +101,7 @@ export default function SearchSingleBranchCombobox({
 												<Check
 													className={cn(
 														"mr-2 h-4 w-4",
-														isActive ? "opacity-100" : "opacity-0"
+														isActive ? "opacity-100" : "opacity-0",
 													)}
 												/>
 												{id}
@@ -114,8 +115,8 @@ export default function SearchSingleBranchCombobox({
 						<div className="space-y-2 p-3">
 							{Array.from({ length: 6 }).map((_, i) => (
 								<div key={i} className="flex items-center gap-2">
-									<Skeleton className="h-4 w-4" />
-									<Skeleton className="h-4 w-16" />
+									<DebouncedSkeleton className="h-4 w-4 rounded-md" />
+									<DebouncedSkeleton className="h-4 w-16 rounded-md" />
 								</div>
 							))}
 						</div>

components/ui/tooltip.jsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return (<TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />);
+}
+
+function Tooltip({
+  ...props
+}) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({
+  ...props
+}) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}>
+        {children}
+        <TooltipPrimitive.Arrow
+          className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

lib/frontend/hooks/useDebouncedVisibility.js

@@ -0,0 +1,75 @@
+"use client";
+
+import React from "react";
+
+/**
+ * useDebouncedVisibility
+ *
+ * Delays the "show" transition and optionally enforces a minimum visible time.
+ *
+ * Typical use cases:
+ * - Avoid flicker for fast loading indicators (e.g. show only after 300ms).
+ * - Keep the indicator visible for at least X ms once shown (avoid blink).
+ *
+ * @param {boolean} isActive
+ * @param {{ delayMs?: number, minVisibleMs?: number }} options
+ * @returns {boolean}
+ */
+export function useDebouncedVisibility(
+	isActive,
+	{ delayMs = 200, minVisibleMs = 0 } = {},
+) {
+	const [visible, setVisible] = React.useState(false);
+
+	const showTimerRef = React.useRef(null);
+	const hideTimerRef = React.useRef(null);
+	const visibleSinceRef = React.useRef(0);
+
+	React.useEffect(() => {
+		if (showTimerRef.current) {
+			clearTimeout(showTimerRef.current);
+			showTimerRef.current = null;
+		}
+		if (hideTimerRef.current) {
+			clearTimeout(hideTimerRef.current);
+			hideTimerRef.current = null;
+		}
+
+		if (isActive) {
+			if (!visible) {
+				showTimerRef.current = setTimeout(
+					() => {
+						visibleSinceRef.current = Date.now();
+						setVisible(true);
+					},
+					Math.max(0, Number(delayMs) || 0),
+				);
+			}
+			return;
+		}
+
+		if (!visible) return;
+
+		const now = Date.now();
+		const elapsed = now - (visibleSinceRef.current || now);
+		const minMs = Math.max(0, Number(minVisibleMs) || 0);
+
+		if (elapsed >= minMs) {
+			setVisible(false);
+			return;
+		}
+
+		hideTimerRef.current = setTimeout(() => {
+			setVisible(false);
+		}, minMs - elapsed);
+	}, [isActive, delayMs, minVisibleMs, visible]);
+
+	React.useEffect(() => {
+		return () => {
+			if (showTimerRef.current) clearTimeout(showTimerRef.current);
+			if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+		};
+	}, []);
+
+	return visible;
+}

package-lock.json

@@ -14,6 +14,7 @@
 				"@radix-ui/react-label": "^2.1.8",
 				"@radix-ui/react-popover": "^1.1.15",
 				"@radix-ui/react-slot": "^1.2.4",
+				"@radix-ui/react-tooltip": "^1.2.8",
 				"bcryptjs": "^3.0.3",
 				"class-variance-authority": "^0.7.1",
 				"clsx": "^2.1.1",
@@ -2382,6 +2383,58 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-tooltip": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+			"integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-dismissable-layer": "1.1.11",
+				"@radix-ui/react-id": "1.1.1",
+				"@radix-ui/react-popper": "1.2.8",
+				"@radix-ui/react-portal": "1.1.9",
+				"@radix-ui/react-presence": "1.1.5",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-slot": "1.2.3",
+				"@radix-ui/react-use-controllable-state": "1.2.2",
+				"@radix-ui/react-visually-hidden": "1.2.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+			"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-use-callback-ref": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -2518,6 +2571,29 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-visually-hidden": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+			"integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-primitive": "2.1.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/rect": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",

package.json

@@ -17,6 +17,7 @@
 		"@radix-ui/react-label": "^2.1.8",
 		"@radix-ui/react-popover": "^1.1.15",
 		"@radix-ui/react-slot": "^1.2.4",
+		"@radix-ui/react-tooltip": "^1.2.8",
 		"bcryptjs": "^3.0.3",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",