From 7a34c160874f7ea1c6e653babddf391aa5b871b2 Mon Sep 17 00:00:00 2001
From: Valentin Haudiquet <valentin.haudiquet@canonical.com>
Date: Fri, 23 Jan 2026 23:25:17 +0100
Subject: [PATCH] Champion page improvements

---
 frontend/components/item/Tree.vue   |  51 +++--
 frontend/components/item/Viewer.vue |  81 +++++++-
 frontend/pages/champion/[alias].vue | 306 ++++++++++++++++++++++------
 3 files changed, 362 insertions(+), 76 deletions(-)

diff --git a/frontend/components/item/Tree.vue b/frontend/components/item/Tree.vue
index fca4bbd..e312a8e 100644
--- a/frontend/components/item/Tree.vue
+++ b/frontend/components/item/Tree.vue
@@ -11,20 +11,43 @@ const emit = defineEmits<{
   refresh: []
 }>()
 
-const { data: items }: ItemResponse = await useFetch(
-  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/items.json'
+const { data: items } = useFetch<Array<{ id: number; iconPath: string }>>(
+  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/items.json',
+  {
+    lazy: true, // Don't block rendering
+    server: false // Client-side only
+  }
 )
-const itemMap = reactive(new Map())
-for (const item of items.value) {
-  itemMap.set(item.id, item)
+
+// Create item map reactively
+const itemMap = reactive(new Map<number, { id: number; iconPath: string }>())
+watch(
+  items,
+  newItems => {
+    if (newItems) {
+      itemMap.clear()
+      for (const item of newItems) {
+        itemMap.set(item.id, item)
+      }
+    }
+  },
+  { immediate: true }
+)
+
+function getItemIconPath(itemId: number): string {
+  const item = itemMap.get(itemId)
+  return item ? CDRAGON_BASE + mapPath(item.iconPath) : ''
 }
 
 const start: Ref<Element | null> = useTemplateRef('start')
 const arrows: Array<svgdomarrowsLinePath> = []
 
 onMounted(() => {
-  refreshArrows()
-  emit('mount', start.value!)
+  // Only refresh arrows and emit if start element is available
+  if (start.value) {
+    refreshArrows()
+    emit('mount', start.value)
+  }
 })
 
 onBeforeUpdate(() => {
@@ -35,8 +58,10 @@ onBeforeUpdate(() => {
 })
 
 onUpdated(() => {
-  refreshArrows()
-  emit('mount', start.value!)
+  if (start.value) {
+    refreshArrows()
+    emit('mount', start.value)
+  }
 })
 
 onUnmounted(() => {
@@ -85,8 +110,10 @@ addEventListener('scroll', _ => {
 })
 
 function handleSubtreeMount(end: Element) {
-  drawArrow(start.value!, end)
-  refreshArrows()
+  if (start.value) {
+    drawArrow(start.value, end)
+    refreshArrows()
+  }
   emit('refresh')
 }
 function handleRefresh() {
@@ -107,7 +134,7 @@ function handleRefresh() {
         width="64"
         height="64"
         :alt="tree.data.toString()"
-        :src="CDRAGON_BASE + mapPath(itemMap.get(tree.data).iconPath)"
+        :src="getItemIconPath(tree.data)"
       />
       <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
         {{ ((tree.count / parentCount!!) * 100).toFixed(0) }}%
diff --git a/frontend/components/item/Viewer.vue b/frontend/components/item/Viewer.vue
index 474c176..f66f7db 100644
--- a/frontend/components/item/Viewer.vue
+++ b/frontend/components/item/Viewer.vue
@@ -11,7 +11,14 @@ const props = defineProps<{
 const ITEMS_API_URL = CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/items.json'
 
 // State
-const { data: items, pending: loadingItems, error: itemsError } = await useFetch(ITEMS_API_URL)
+const {
+  data: items,
+  pending: loadingItems,
+  error: itemsError
+} = useFetch(ITEMS_API_URL, {
+  lazy: true, // Don't block rendering
+  server: false // Client-side only
+})
 const itemMap = ref<Map<number, unknown>>(new Map())
 
 // Initialize item map
@@ -107,13 +114,23 @@ const _isLoading = computed(() => loadingItems.value || props.loading)
             style="margin-left: 5px; margin-right: 5px"
           >
             <NuxtImg
-              v-if="item.data != null && item.data != undefined"
+              v-if="item.data != null && item.data != undefined && itemMap.get(item.data)"
               class="item-img"
               width="64"
               height="64"
               :alt="item.data.toString()"
               :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
             />
+            <div
+              v-else
+              style="
+                width: 64px;
+                height: 64px;
+                margin: 10px;
+                background: var(--color-surface);
+                border: 1px solid var(--color-on-surface);
+              "
+            ></div>
             <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
               {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
             </h3>
@@ -129,13 +146,23 @@ const _isLoading = computed(() => loadingItems.value || props.loading)
             style="margin-left: 5px; margin-right: 5px"
           >
             <NuxtImg
-              v-if="item.data != null && item.data != undefined"
+              v-if="item.data != null && item.data != undefined && itemMap.get(item.data)"
               class="item-img"
               width="64"
               height="64"
               :alt="item.data.toString()"
               :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
             />
+            <div
+              v-else
+              style="
+                width: 64px;
+                height: 64px;
+                margin: 10px;
+                background: var(--color-surface);
+                border: 1px solid var(--color-on-surface);
+              "
+            ></div>
             <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
               {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
             </h3>
@@ -153,13 +180,23 @@ const _isLoading = computed(() => loadingItems.value || props.loading)
           style="margin-left: 5px; margin-right: 5px"
         >
           <NuxtImg
-            v-if="item.data != null && item.data != undefined"
+            v-if="item.data != null && item.data != undefined && itemMap.get(item.data)"
             class="item-img"
             width="64"
             height="64"
             :alt="item.data.toString()"
             :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
           />
+          <div
+            v-else
+            style="
+              width: 64px;
+              height: 64px;
+              margin: 10px;
+              background: var(--color-surface);
+              border: 1px solid var(--color-on-surface);
+            "
+          ></div>
           <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
             {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
           </h3>
@@ -181,13 +218,23 @@ const _isLoading = computed(() => loadingItems.value || props.loading)
           style="margin-left: 5px; margin-right: 5px"
         >
           <NuxtImg
-            v-if="item.data != null && item.data != undefined"
+            v-if="item.data != null && item.data != undefined && itemMap.get(item.data)"
             class="item-img"
             width="64"
             height="64"
             :alt="item.data.toString()"
             :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
           />
+          <div
+            v-else
+            style="
+              width: 64px;
+              height: 64px;
+              margin: 10px;
+              background: var(--color-surface);
+              border: 1px solid var(--color-on-surface);
+            "
+          ></div>
           <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
             {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
           </h3>
@@ -205,13 +252,23 @@ const _isLoading = computed(() => loadingItems.value || props.loading)
             style="margin-left: 5px; margin-right: 5px"
           >
             <NuxtImg
-              v-if="item.data != null && item.data != undefined"
+              v-if="item.data != null && item.data != undefined && itemMap.get(item.data)"
               class="item-img"
               width="64"
               height="64"
               :alt="item.data.toString()"
               :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
             />
+            <div
+              v-else
+              style="
+                width: 64px;
+                height: 64px;
+                margin: 10px;
+                background: var(--color-surface);
+                border: 1px solid var(--color-on-surface);
+              "
+            ></div>
             <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
               {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
             </h3>
@@ -225,13 +282,23 @@ const _isLoading = computed(() => loadingItems.value || props.loading)
             style="margin-left: 5px; margin-right: 5px"
           >
             <NuxtImg
-              v-if="item.data != null && item.data != undefined"
+              v-if="item.data != null && item.data != undefined && itemMap.get(item.data)"
               class="item-img"
               width="64"
               height="64"
               :alt="item.data.toString()"
               :src="CDRAGON_BASE + mapPath((itemMap.get(item.data) as any).iconPath)"
             />
+            <div
+              v-else
+              style="
+                width: 64px;
+                height: 64px;
+                margin: 10px;
+                background: var(--color-surface);
+                border: 1px solid var(--color-on-surface);
+              "
+            ></div>
             <h3 style="width: fit-content; margin: auto; margin-bottom: 10px">
               {{ ((item.count / builds.tree.count) * 100).toFixed(0) }}%
             </h3>
diff --git a/frontend/pages/champion/[alias].vue b/frontend/pages/champion/[alias].vue
index 2702b81..0860e2b 100644
--- a/frontend/pages/champion/[alias].vue
+++ b/frontend/pages/champion/[alias].vue
@@ -1,82 +1,197 @@
 <script setup lang="ts">
+import { ref, computed } from 'vue'
+
 const route = useRoute()
 const championAlias = route.params.alias as string
 
-const { data: championData }: { data: Ref<ChampionData> } = await useFetch(
-  '/api/champion/' + championAlias.toLowerCase()
+// State management
+const isLoading = ref(true)
+const error = ref<string | null>(null)
+const laneState = ref(0)
+const state = ref('runes')
+
+// Use useAsyncData with client-side fetching for faster initial page load
+const {
+  data: championData,
+  pending,
+  error: fetchError,
+  refresh
+} = useAsyncData<ChampionData>(
+  'champion-' + championAlias.toLowerCase(),
+  () => $fetch('/api/champion/' + championAlias.toLowerCase()),
+  {
+    server: false, // Disable server-side fetching for faster initial load
+    lazy: false // Fetch immediately on client
+  }
 )
-const championId = championData.value.id
+
+// Handle errors from useAsyncData
+watchEffect(() => {
+  if (fetchError.value) {
+    console.error('Error fetching champion data:', fetchError.value)
+    error.value =
+      fetchError.value instanceof Error
+        ? fetchError.value.message
+        : typeof fetchError.value === 'string'
+          ? fetchError.value
+          : 'Unknown error occurred'
+  }
+})
+
+// Computed properties
+const championId = computed(() => championData.value?.id || 0)
+const lane = computed(() => championData.value?.lanes?.[laneState.value] || null)
+
+// Update loading state with proper error handling
+isLoading.value = pending.value
+
+// Watch for data changes to update loading state
+watch(
+  [championData, fetchError, pending],
+  ([newData, newError, newPending]) => {
+    if (newError) {
+      error.value =
+        newError instanceof Error
+          ? newError.message
+          : typeof newError === 'string'
+            ? newError
+            : 'Unknown error occurred'
+      isLoading.value = false
+    } else if (newData) {
+      isLoading.value = false
+    } else {
+      isLoading.value = newPending
+    }
+  },
+  { immediate: true }
+)
+
+// Add timeout to prevent infinite loading
+const loadingTimeout = setTimeout(() => {
+  if (isLoading.value && !championData.value && !error.value) {
+    console.warn('Champion data loading timed out')
+    error.value = 'Loading took too long. Please try again.'
+    isLoading.value = false
+  }
+}, 5000) // 5 second timeout
+
+// Clean up timeout when component unmounts
+onUnmounted(() => {
+  clearTimeout(loadingTimeout)
+})
+
+// Set up SEO after data is loaded - only on server side
+if (import.meta.server) {
+  watchEffect(() => {
+    if (championData.value) {
+      defineOgImageComponent('Champion', {
+        title: championData.value.name,
+        id: championId.value,
+        winrate: championData.value.winrate,
+        pickrate: championData.value.pickrate,
+        gameCount: championData.value.gameCount
+      })
+      useSeoMeta({
+        title: championData.value.name,
+        description: 'Build path and runes for ' + championData.value.name + ' on BuildPath'
+      })
+    }
+  })
+}
 
 // Prefetch home page for faster navigation
 useHead({
   link: [{ rel: 'prefetch', href: '/' }]
 })
 
-defineOgImageComponent('Champion', {
-  title: championData.value.name,
-  id: championId,
-  winrate: championData.value.winrate,
-  pickrate: championData.value.pickrate,
-  gameCount: championData.value.gameCount
-})
-useSeoMeta({
-  title: championData.value.name,
-  description: 'Build path and runes for ' + championData.value.name + ' on BuildPath'
-})
-
-const laneState = ref(0)
-const state = ref('runes')
-const lane = ref(championData.value.lanes[laneState.value])
 function updateState(newState: string, newLane: number) {
   state.value = newState
   laneState.value = newLane
-  lane.value = championData.value.lanes[laneState.value]
+}
+
+// Function to retry fetching data
+function fetchChampionData() {
+  error.value = null
+  isLoading.value = true
+  refresh().catch(err => {
+    console.error('Error refreshing champion data:', err)
+    error.value = err instanceof Error ? err.message : 'Failed to refresh champion data'
+    isLoading.value = false
+  })
 }
 </script>
 
 <template>
   <div class="champion-root">
-    <Head>
-      <Title>{{ championData.name }}</Title>
-    </Head>
+    <!-- Loading state -->
+    <div v-if="isLoading" class="loading-state">
+      <div class="loading-spinner" />
+      <p>Loading champion data...</p>
+    </div>
 
-    <div id="alias-content-wrapper">
-      <NavBar
-        :champion-name="championData.name"
-        :champion-lanes="championData.lanes"
-        @state-change="updateState"
-      />
+    <!-- Error state -->
+    <div v-else-if="error" class="error-state">
+      <Logo style="margin: auto; margin-top: 64px; margin-bottom: 64px" />
+      <div style="margin: auto; width: fit-content; margin-top: 64px">
+        <h1>Error Loading Champion</h1>
+        <h2>Sorry, we couldn't load this champion's data</h2>
+        <div style="margin-top: 64px">
+          <h3 v-if="error">Error: {{ error }}</h3>
+          <button class="retry-button" @click="fetchChampionData">Retry</button>
+        </div>
+      </div>
+    </div>
 
-      <div id="champion-content">
-        <ChampionTitle
-          v-if="championData.gameCount > 0"
-          id="champion-title"
-          :champion-id="championId"
-          :winrate="lane.winrate"
-          :pickrate="lane.pickrate"
-          :game-count="lane.count"
+    <!-- Success state -->
+    <div v-else-if="championData" class="champion-success">
+      <Head>
+        <Title>{{ championData.name }}</Title>
+      </Head>
+
+      <div id="alias-content-wrapper">
+        <NavBar
+          :champion-name="championData.name"
+          :champion-lanes="championData.lanes"
+          @state-change="updateState"
         />
-        <RuneSelector
-          v-if="state == 'runes' && championData.gameCount > 0"
-          style="margin: auto; margin-top: 40px"
-          :runes="lane.runes!!"
-        />
-        <ItemViewer
-          v-if="state == 'items' && championData.gameCount > 0"
-          style="margin: auto; margin-top: 40px"
-          :builds="lane.builds!!"
-        />
-        <ItemTree
-          v-if="state == 'alternatives' && championData.gameCount > 0"
-          style="margin: auto; margin-top: 40px; width: fit-content"
-          :tree="lane.builds!!.tree"
-        />
-        <h2
-          v-if="championData.gameCount == 0"
-          style="margin: auto; margin-top: 20px; width: fit-content"
-        >
-          Sorry, there is no data for this champion :(
-        </h2>
+
+        <div id="champion-content">
+          <ChampionTitle
+            v-if="championData.gameCount > 0 && lane"
+            id="champion-title"
+            :champion-id="championId"
+            :winrate="lane.winrate || 0"
+            :pickrate="lane.pickrate || 0"
+            :game-count="lane.count || 0"
+          />
+          <ClientOnly>
+            <LazyRuneSelector
+              v-if="state == 'runes' && championData.gameCount > 0 && lane?.runes"
+              style="margin: auto; margin-top: 40px"
+              :runes="lane.runes"
+            />
+          </ClientOnly>
+          <ClientOnly>
+            <LazyItemViewer
+              v-if="state == 'items' && championData.gameCount > 0 && lane?.builds"
+              style="margin: auto; margin-top: 40px"
+              :builds="lane.builds"
+            />
+          </ClientOnly>
+          <ClientOnly>
+            <LazyItemTree
+              v-if="state == 'alternatives' && championData.gameCount > 0 && lane?.builds?.tree"
+              style="margin: auto; margin-top: 40px; width: fit-content"
+              :tree="lane.builds.tree"
+            />
+          </ClientOnly>
+          <h2
+            v-if="championData.gameCount == 0"
+            style="margin: auto; margin-top: 20px; width: fit-content"
+          >
+            Sorry, there is no data for this champion :(
+          </h2>
+        </div>
       </div>
     </div>
   </div>
@@ -96,6 +211,83 @@ function updateState(newState: string, newLane: number) {
   margin-left: 39px;
   width: 100%;
 }
+
+/* Loading state styles */
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  width: 100%;
+  gap: 16px;
+}
+
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 6px solid var(--color-surface);
+  border-top: 6px solid var(--color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-state p {
+  margin: 0;
+  color: var(--color-on-surface);
+  font-size: 1.2rem;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* Error state styles */
+.error-state {
+  text-align: center;
+  padding: 64px 20px;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.retry-button {
+  background-color: #4caf50;
+  border: none;
+  color: white;
+  padding: 12px 24px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin-top: 20px;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background-color 0.3s;
+}
+
+.retry-button:hover {
+  background-color: #45a049;
+}
+
 @media only screen and (max-width: 650px) {
   #champion-content {
     margin: auto;