fix perfs

src/market/Market.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computedAsync, useStorage } from '@vueuse/core';
-import { ref } from 'vue';
+import { ArrowPathIcon } from '@heroicons/vue/24/outline';
+import { useStorage } from '@vueuse/core';
+import { onMounted, ref } from 'vue';
 import { MarketOrderHistory, MarketResult, getHistory, getHistoryQuartils, jitaId } from ".";
 import MarketReultTable from "./MarketResultTable.vue";
 import { getMarketType, searchMarketType } from "./type";
@@ -12,19 +13,18 @@ type MarketItem = {
 
 const item = ref("");
 const items = useStorage<MarketItem[]>('market-items', []);
-const result = computedAsync<MarketResult[]>(() => Promise.all(items.value.map(async (i) => {
-    const [type, quartils] = await Promise.all([
-        getMarketType(i.typeID), 
-        getHistoryQuartils(i.history)
-    ]);
+const result = ref<MarketResult[]>([]);
+const processResult = async (i: MarketItem) => {
+    const type = getMarketType(i.typeID);
+    const quartils = getHistoryQuartils(i.history)
 
     return {
-        type,
+        type: await type,
         q1: quartils.q1,
         median: quartils.median,
         q3: quartils.q3
     };
-})), []);
+}
 const addOrRelaod = async (typeID: number) => {
     const history = await getHistory(jitaId, typeID);
     const item = { typeID, history };
@@ -34,6 +34,15 @@ const addOrRelaod = async (typeID: number) => {
     } else {
         items.value = [ ...items.value, item];
     }
+    
+    const filteredResult = result.value.filter(r => r.type.id !== typeID);
+    
+    result.value = [ ...filteredResult, await processResult(item) ];
+}
+const reloadAll = async () => {
+    items.value = await Promise.all(items.value.map( async i => ({ ...i, history: await getHistory(jitaId, i.typeID) })));
+    
+    result.value = await Promise.all(items.value.map(processResult));
 }
 const addItem = async () => {
     const type = await searchMarketType(item.value.split('\t')[0]);
@@ -41,15 +50,19 @@ const addItem = async () => {
     item.value = "";
     addOrRelaod(type.id);
 }
+onMounted(async () => {
+    result.value = await Promise.all(items.value.map(processResult));
+})
 </script>
 
 <template>
-    <div class="grid mb-2 mt-4">
-        <div>
+    <div class="grid grid-cols-2 mb-2 mt-4">
+        <div class="w-auto">
             <span>Item: </span>
             <input type="text" class="w-96" v-model="item" @keyup.enter="addItem" />
             <button class="justify-self-end ms-2" @click="addItem">Add</button>
         </div>
+            <button class="justify-self-end flex" @click="reloadAll"><ArrowPathIcon class="h-6 w-6 me-2" />Reload all</button>
     </div>
     <template v-if="result.length > 0">
         <hr />