rhl-lieferscheine/components/app-shell/SessionIndicator.jsx

"use client";

import React from "react";
import { Loader2 } from "lucide-react";

import { useAuth } from "@/components/auth/authContext";
import { useDebouncedVisibility } from "@/lib/frontend/hooks/useDebouncedVisibility";
import {
	SESSION_INDICATOR_DELAY_MS,
	SESSION_INDICATOR_MIN_VISIBLE_MS,
} from "@/lib/frontend/ui/uxTimings";

import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@/components/ui/tooltip";

export default function SessionIndicator() {
	const { status, isValidating } = useAuth();

	const isActive = status === "loading" || Boolean(isValidating);

	const visible = useDebouncedVisibility(isActive, {
		delayMs: SESSION_INDICATOR_DELAY_MS,
		minVisibleMs: SESSION_INDICATOR_MIN_VISIBLE_MS,
	});

	if (!visible) return null;

	return (
		<Tooltip>
			<TooltipTrigger asChild>
				<div className="flex items-center gap-2" aria-live="polite">
					<Loader2
						className="h-4 w-4 animate-spin text-muted-foreground"
						aria-hidden="true"
					/>
					<span className="hidden text-xs text-muted-foreground md:inline">
						Sitzung wird geprüft…
					</span>
				</div>
			</TooltipTrigger>

			<TooltipContent side="bottom">Sitzung wird geprüft…</TooltipContent>
		</Tooltip>
	);
}