feat: add loading indicator

app/components/TabLink.tsx

@@ -1,7 +1,8 @@
 import { NavLink } from '@remix-run/react'
-import clsx from 'clsx'
 import type { ReactNode } from 'react'
 
+import { cn } from '~/utils/cn'
+
 type Properties = {
 	readonly name: string;
 	readonly to: string;
@@ -12,13 +13,20 @@ export default function TabLink({ name, to, icon }: Properties) {
 	return (
 		<NavLink
 			to={to}
-			className={({ isActive, isPending }) => clsx(
-				'flex items-center gap-x-2 p-2 border-b-2 text-md text-nowrap',
-				isActive ? 'border-white' : 'border-transparent',
-				isPending && 'animate-pulse'
+			prefetch='intent'
+			className={({ isActive }) => cn(
+				'border-b-2 py-1.5',
+				isActive ? 'border-white' : 'border-transparent'
 			)}
 		>
-			{icon} {name}
+			<div
+				className={cn(
+					'flex items-center gap-x-2 px-2.5 py-1.5 text-md text-nowrap',
+					'hover:bg-ui-100/5 dark:hover:bg-ui-900/40 rounded-md'
+				)}
+			>
+				{icon} {name}
+			</div>
 		</NavLink>
 	)
 }

app/routes/_data.tsx

@@ -1,8 +1,10 @@
 import { type LoaderFunctionArgs, redirect } from '@remix-run/node'
-import { Outlet, useLoaderData } from '@remix-run/react'
+import { Outlet, useLoaderData, useNavigation } from '@remix-run/react'
+import { ProgressBar } from 'react-aria-components'
 
 import { ErrorPopup } from '~/components/Error'
 import Header from '~/components/Header'
+import { cn } from '~/utils/cn'
 import { getContext } from '~/utils/config'
 import { HeadscaleError, pull } from '~/utils/headscale'
 import { destroySession, getSession } from '~/utils/sessions'
@@ -40,11 +42,22 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 export default function Layout() {
 	const data = useLoaderData<typeof loader>()
+	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>
 			<Header data={data}/>
-
 			<main className='container mx-auto overscroll-contain mt-4 mb-24'>
 				<Outlet/>
 			</main>

tailwind.config.ts

@@ -24,6 +24,19 @@ export default {
 			colors: {
 				main: colors.slate,
 				ui: colors.neutral
+			},
+			keyframes: {
+				loader: {
+					from: {
+						transform: 'translateX(-100%)'
+					},
+					to: {
+						transform: 'translateX(100%)'
+					}
+				}
+			},
+			animation: {
+				loading: 'loader 0.8s infinite ease-in-out'
 			}
 		}
 	},