Champion page improvements

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