hide nav bar on root loading screen, show branded splash instead of "Laden"

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/routes/__root.tsx

@@ -10,13 +10,15 @@ export const Route = createRootRoute({
 	component: () => {
 		const matchRoute = useMatchRoute();
 		const isOnboarding = matchRoute({ to: "/onboarding" });
+		const isRoot = matchRoute({ to: "/" });
+		const hideNav = isOnboarding || isRoot;
 
 		return (
 			<div className="flex min-h-screen flex-col bg-background text-foreground">
 				<main className="mx-auto w-full max-w-2xl flex-1 px-4 pb-20 pt-6">
 					<Outlet />
 				</main>
-				{!isOnboarding && (
+				{!hideNav && (
 					<nav className="fixed inset-x-0 bottom-0 border-t bg-background">
 						<div className="mx-auto flex max-w-2xl">
 							<Link

src/routes/index.tsx

@@ -1,4 +1,5 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { getDb } from "@/shared/db/client";
 
@@ -32,8 +33,9 @@ function RootRedirect() {
 	if (!loading) return null;
 
 	return (
-		<div className="flex min-h-[60vh] items-center justify-center">
-			<p className="text-muted-foreground">Laden…</p>
+		<div className="flex min-h-[80vh] flex-col items-center justify-center gap-4">
+			<h1 className="text-2xl font-bold">TherapyFinder</h1>
+			<Loader2 className="size-6 animate-spin text-muted-foreground" />
 		</div>
 	);
 }