From 8a3480e5aba857c97fb8b9d624e80e860fd603ad Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Sun, 8 Mar 2026 11:15:34 +0000
Subject: [PATCH] fix: handle stale chunk 404s + add page loading states

- Router catches failed dynamic imports and forces reload (stale deploy cache)
- LeaderboardPage: sprite-based loading animation while fetching
- ArenaPage: sprite-based loading animation while fetching

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/ArenaPage.vue       | 8 +++++++-
 frontend/src/pages/LeaderboardPage.vue | 8 +++++++-
 frontend/src/router.ts                 | 8 ++++++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/ArenaPage.vue b/frontend/src/pages/ArenaPage.vue
index 8b72529..f91bb38 100644
--- a/frontend/src/pages/ArenaPage.vue
+++ b/frontend/src/pages/ArenaPage.vue
@@ -45,8 +45,14 @@ const tierClass = (t: number) => `tier-${t}`
         <div></div>
       </div>
 
+      <!-- Loading -->
+      <div v-if="isLoading" class="flex-1 flex flex-col items-center justify-center gap-4">
+        <SpritePreview seed="loading" archetype="blob" :size="80" class="animate-bounce" />
+        <p class="font-display text-sm text-text-muted animate-pulse tracking-widest">LOADING FIGHTS...</p>
+      </div>
+
       <!-- Fight cards -->
-      <div class="flex-1 min-h-0 overflow-y-auto space-y-3">
+      <div v-else class="flex-1 min-h-0 overflow-y-auto space-y-3">
         <RouterLink
           v-for="fight in fights"
           :key="fight.id"
diff --git a/frontend/src/pages/LeaderboardPage.vue b/frontend/src/pages/LeaderboardPage.vue
index a7419d9..d6cccaf 100644
--- a/frontend/src/pages/LeaderboardPage.vue
+++ b/frontend/src/pages/LeaderboardPage.vue
@@ -52,8 +52,14 @@ const record = (b: Bot) => `${b.wins}W - ${b.losses}L`
         </span>
       </div>
 
+      <!-- Loading -->
+      <div v-if="isLoading" class="flex-1 flex flex-col items-center justify-center gap-4">
+        <SpritePreview seed="loading" archetype="standard" :size="80" class="animate-bounce" />
+        <p class="font-display text-sm text-text-muted animate-pulse tracking-widest">LOADING FIGHTERS...</p>
+      </div>
+
       <!-- Table -->
-      <div class="flex-1 min-h-0 overflow-y-auto border border-border rounded-lg bg-surface-raised/50">
+      <div v-else class="flex-1 min-h-0 overflow-y-auto border border-border rounded-lg bg-surface-raised/50">
         <table class="w-full">
           <thead class="sticky top-0 bg-surface-raised z-10">
             <tr class="border-b border-border text-text-muted font-display text-[10px] uppercase tracking-[0.15em]">
diff --git a/frontend/src/router.ts b/frontend/src/router.ts
index 9d3e762..895c585 100644
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -67,3 +67,11 @@ export const router = createRouter({
   history: createWebHistory(),
   routes,
 })
+
+// Handle stale chunk 404s after deploy — force reload to get new assets
+router.onError((err, to) => {
+  if (err.message.includes('Failed to fetch dynamically imported module') ||
+      err.message.includes('Importing a module script failed')) {
+    window.location.assign(to.fullPath)
+  }
+})