feat(web): add smooth page transitions and WASM loading states

- Implement navigation state tracking with optimistic UI updates
- Add loading spinner and error handling for WASM initialization
- Insert browser yield points during game initialization to prevent freezing
- Redesign leaderboard with tabbed navigation and mock data structure
- Add utility CSS classes for consistent page layouts

web/layouts/LayoutDefault.tsx

@@ -9,6 +9,32 @@ import { useState, useEffect } from "react";
 import { usePageContext } from "vike-react/usePageContext";
 import { IconBrandGithub, IconDownload, IconDeviceGamepad3, IconTrophy } from "@tabler/icons-react";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
+import { usePendingNavigation } from "@/lib/navigation";
+
+function ClientOnlyScrollbars({ children, className }: { children: React.ReactNode; className?: string }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return <div className={`${className} overflow-auto`}>{children}</div>;
+  }
+
+  return (
+    <OverlayScrollbarsComponent
+      defer
+      options={{
+        scrollbars: {
+          theme: "os-theme-light",
+          autoHide: "scroll",
+          autoHideDelay: 1300,
+        },
+      }}
+      className={className}
+    >
+      {children}
+    </OverlayScrollbarsComponent>
+  );
+}
 
 const links = [
   {
@@ -36,18 +62,17 @@ const links = [
 export function Link({ href, label, icon }: { href: string; label: string; icon?: React.ReactNode }) {
   const pageContext = usePageContext();
   const { urlPathname } = pageContext;
-  const isActive = href === "/" ? urlPathname === href : urlPathname.startsWith(href);
+  const pendingUrl = usePendingNavigation();
+  const effectiveUrl = pendingUrl ?? urlPathname;
+  const isActive = href === "/" ? effectiveUrl === href : effectiveUrl.startsWith(href);
   return (
-    <a 
-      href={href} 
+    <a
+      href={href}
       className={`
         flex items-center gap-1.5 
         tracking-wide
         transition-colors duration-200
-        ${isActive 
-          ? "text-white" 
-          : "text-gray-500 hover:text-gray-300"
-        }
+        ${isActive ? "text-white" : "text-gray-500 hover:text-gray-300"}
       `}
     >
       {icon}
@@ -60,12 +85,12 @@ export default function LayoutDefault({ children }: { children: React.ReactNode
   const [opened, setOpened] = useState(false);
   const toggle = () => setOpened((v) => !v);
   const close = () => setOpened(false);
-  
+
   const pageContext = usePageContext();
   const { urlPathname } = pageContext;
-  const isIndexPage = urlPathname === "/";
-  const isLeaderboardPage = urlPathname.startsWith("/leaderboard");
-  const isDownloadPage = urlPathname.startsWith("/download");
+  const pendingUrl = usePendingNavigation();
+  const effectiveUrl = pendingUrl ?? urlPathname;
+  const isIndexPage = effectiveUrl === "/";
 
   const sourceLinks = links
     .filter((link) => !link.href.startsWith("/"))
@@ -93,11 +118,11 @@ export default function LayoutDefault({ children }: { children: React.ReactNode
             <span className="sr-only">Toggle menu</span>
             <div className="w-5 h-0.5 bg-yellow-400" />
           </button>
-          
+
           <div className="flex items-center gap-8">
             <Link href="/leaderboard" label="Leaderboard" icon={<IconTrophy size={18} />} />
-            
-            <a 
+
+            <a
               href="/"
               onClick={(e) => {
                 if (isIndexPage) {
@@ -105,38 +130,27 @@ export default function LayoutDefault({ children }: { children: React.ReactNode
                 }
               }}
             >
-              <h1 
-                className={`text-3xl tracking-[0.3em] title-hover ${
-                  isIndexPage 
-                    ? 'text-yellow-400' 
-                    : 'glimmer-text'
+              <h1
+                className={`text-3xl tracking-[0.3em] text-yellow-400 title-base ${
+                  isIndexPage ? "" : "title-glimmer title-hover"
                 }`}
-                style={{ fontFamily: 'Russo One' }}
+                style={{ fontFamily: "Russo One" }}
+                data-text="PAC-MAN"
               >
                 PAC-MAN
               </h1>
             </a>
-            
+
             <Link href="/download" label="Download" icon={<IconDownload size={18} />} />
           </div>
-          
+
           <div className="absolute right-4 hidden sm:flex gap-4 items-center">{sourceLinks}</div>
         </div>
       </header>
-      
-      <OverlayScrollbarsComponent 
-        defer
-        options={{
-          scrollbars: {
-            theme: 'os-theme-light',
-            autoHide: 'scroll',
-            autoHideDelay: 1300,
-          },
-        }}
-        className="flex-1"
-      >
+
+      <ClientOnlyScrollbars className="flex-1">
         <main>{children}</main>
-      </OverlayScrollbarsComponent>
+      </ClientOnlyScrollbars>
 
       {opened && (
         <div className="fixed inset-0 z-30">

web/layouts/tailwind.css

@@ -66,19 +66,88 @@
   }
 }
 
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Loading spinner - CSS animation runs on compositor thread,
+   continues even during main thread blocking */
+.loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid rgb(250 204 21 / 0.3);
+  border-top-color: rgb(250 204 21);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* Error indicator - X mark with shake animation */
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  20%, 60% { transform: translateX(-4px); }
+  40%, 80% { transform: translateX(4px); }
+}
+
+.error-indicator {
+  width: 48px;
+  height: 48px;
+  position: relative;
+  animation: shake 0.5s ease-out;
+}
+
+.error-indicator::before,
+.error-indicator::after {
+  content: '';
+  position: absolute;
+  width: 4px;
+  height: 32px;
+  background: rgb(239 68 68);
+  border-radius: 2px;
+  top: 50%;
+  left: 50%;
+}
+
+.error-indicator::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.error-indicator::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
 
 
 @layer utilities {
+  .page-container {
+    @apply mx-auto max-w-3xl py-8 px-4;
+  }
+
+  .card {
+    @apply border border-yellow-400/20 rounded-md bg-transparent p-6 shadow-[0_4px_20px_rgba(250,204,21,0.08)];
+  }
+
   .title-hover {
     transition: transform 0.2s ease-out, filter 0.2s ease-out;
   }
-  
+
   .title-hover:hover {
     transform: scale(1.03);
     filter: brightness(1.15);
   }
 
-  .glimmer-text {
+  .title-base {
+    position: relative;
+  }
+
+  .title-base::before {
+    content: attr(data-text);
+    position: absolute;
+    inset: 0;
     background: linear-gradient(
       90deg,
       rgb(156 163 175) 0%,
@@ -93,5 +162,11 @@
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: glimmer 3s ease-in-out infinite;
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
+  }
+
+  .title-base.title-glimmer::before {
+    opacity: 1;
   }
 }