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>
 	)
 }