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 />

src/market/MarketResultTable.vue

@@ -56,7 +56,7 @@ const { sortedArray, headerProps } = useSort(computed(() => props.result.map(r =
                     <td class="text-right">{{ formatIsk(r.q3) }}</td>
                     <td class="text-right">{{  percentFormater.format(r.percent) }}</td>
                     <td class="text-right">
-                        <button class="p-0 border-none bg-transparent" @click="$emit('relaod', r.typeID)"><ArrowPathIcon class="h-6 w-6" /></button>
+                        <button class="btn-icon" @click="$emit('relaod', r.typeID)"><ArrowPathIcon class="hover:stroke-slate-400"/></button>
                     </td>
                 </tr>
             </tbody>

src/market/market.ts

@@ -28,7 +28,7 @@ export type HistoryQuartils = {
 
 export const getHistory = async (regionId: number, tyeId: number): Promise<MarketOrderHistory[]> =>  (await esiAxiosInstance.get(`/markets/${regionId}/history/`, { params: { type_id: tyeId } })).data;
 
-export const getHistoryQuartils = async (history: MarketOrderHistory[]): Promise<HistoryQuartils> => {
+export const getHistoryQuartils = (history: MarketOrderHistory[]): HistoryQuartils => {
     const volumes = history
         .flatMap(h => {
             const volume = h.volume;

src/style.css

@@ -41,4 +41,10 @@
         @apply bg-slate-600 hover:bg-slate-800;
         border-radius: 5px;
     }
+    .btn-icon {
+        @apply p-0 border-none bg-transparent hover:text-slate-400;
+        > svg {
+            @apply w-6 h-6 hover:text-slate-400;
+        }
+    }
 }