fix: handle headscale unavailability gracefully

app/root.tsx

@@ -1,9 +1,13 @@
-import type { LinksFunction, MetaFunction } from 'react-router';
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
+import type { LoaderFunctionArgs, LinksFunction, MetaFunction } from 'react-router';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, useNavigation } from 'react-router';
+import { loadContext } from '~/utils/config/headplane';
 
+import { ProgressBar } from 'react-aria-components';
 import { ErrorPopup } from '~/components/Error';
+// TODO: Make this a default export
 import { Toaster } from '~/components/Toaster';
 import stylesheet from '~/tailwind.css?url';
+import { cn } from '~/utils/cn';
 
 export const meta: MetaFunction = () => [
 	{ title: 'Headplane' },
@@ -41,5 +45,20 @@ export function ErrorBoundary() {
 }
 
 export default function App() {
-	return <Outlet />;
+	const nav = useNavigation();
+
+	return (
+		<>
+			<ProgressBar aria-label="Loading...">
+				<div
+					className={cn(
+						'fixed top-0 left-0 z-50 w-1/2 h-1',
+						'bg-blue-500 dark:bg-blue-400 opacity-0',
+						nav.state === 'loading' && 'animate-loading opacity-100',
+					)}
+				/>
+			</ProgressBar>
+			<Outlet />
+		</>
+	)
 }