fetch slots async, with loading

src/components/StorageRequest.vue

@@ -11,6 +11,7 @@ import StateIndicator from '@/components/StateIndicator.vue'
 import RelativeTime from '@/components/RelativeTime.vue'
 import ShortenValue from '@/components/ShortenValue.vue'
 import Slots from './Slots.vue'
+import SkeletonLoading from './SkeletonLoading.vue'
 
 const request = defineModel()
 const props = defineProps({
@@ -21,6 +22,14 @@ const props = defineProps({
   enableModeration: {
     type: Boolean,
     default: false
+  },
+  slotsLoading: {
+    type: Boolean,
+    default: false
+  },
+  slotsFetched: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -179,7 +188,8 @@ const stateColour = computed(() => getStateColour(request.value.state))
         </table>
       </div>
 
-      <Slots :slots="request.slots"></Slots>
+      <SkeletonLoading v-if="slotsLoading && !slotsFetched" type="text" />
+      <Slots v-else :slots="request.slots"></Slots>
     </div>
   </div>
 </template>

src/stores/requests.js

@@ -144,7 +144,6 @@ export const useRequestsStore = defineStore(
         }
 
         return events.map((event, i) => handleStorageRequestEvent(event)) //{
-
       } catch (error) {
         console.error(`failed to load past contract events: ${error.message}`)
         return []
@@ -175,31 +174,41 @@ export const useRequestsStore = defineStore(
     }
 
     async function fetchRequestDetails(requestId) {
-      let start = Date.now()
-      console.log('fetching request', requestId)
-      const preFetched = requests.value[requestId] || {}
-      if (preFetched?.detailsFetched) {
-        console.log('request', requestId, 'already fetched')
-        return
-      }
-      loading.value = true
       try {
-        let arrRequest = await marketplace.getRequest(requestId)
-        let request = arrayToObject(arrRequest)
-        let slots = await getSlots(requestId, request.ask.slots)
-        const reqExisting = requests.value[requestId] || {}
+        // const reqExisting = requests.value[requestId] || {}
+        if (!requests.value[requestId]) {
+          requests.value[requestId] = {}
+        }
+        requests.value[requestId].detailsLoading = true
+
+        let request = requests.value[requestId]
+        // fetch request details if not previously fetched
+        if (request?.detailsFetched !== true) {
+          console.log('request', requestId, ' details already fetched')
+          request = arrayToObject(await marketplace.getRequest(requestId))
+        }
+
+        // always fetch slots
+        console.log('fetching slots for request', requestId)
+        getSlots(requestId, request.ask.slots).then((slots) => {
+          requests.value[requestId].slots = slots
+          requests.value[requestId].slotsLoading = false
+          requests.value[requestId].slotsFetched = true
+        })
+
+        // update state
         requests.value[requestId] = {
-          ...reqExisting, // state, requestedAt, requestFinishedId (null)
+          ...requests.value[requestId], // state, requestedAt, requestFinishedId (null)
           ...request,
-          slots,
-          detailsFetched: true
+          slotsLoading: true,
+          detailsFetched: true,
+          detailsLoading: false
         }
       } catch (error) {
         console.error(`failed to load slots for request ${requestId}: ${error}`)
         throw error
       } finally {
-        console.log(`fetched request in ${(Date.now() - start) / 1000}s`)
-        loading.value = false
+        requests.value[requestId].detailsLoading = false
       }
     }
 

src/views/RequestView.vue

@@ -26,26 +26,21 @@ async function fetchRequest(requestId) {
 }
 
 const request = computed(() => requests.value[route.params.requestId])
+const detailsLoading = computed(() => requests.value[route.params.requestId].detailsLoading)
 
-function watchRequestId() {
-  watch(() => route.params.requestId, fetchRequest, { immediate: true })
-}
-
-if (fetched.value) {
-  watchRequestId()
-} else {
-  watch(() => fetched.value, watchRequestId, { once: true })
-}
+watch(() => route.params.requestId, fetchRequest, { immediate: true })
 </script>
 
 <template>
   <div>
-    <SkeletonLoading v-if="loading" type="image" />
+    <SkeletonLoading v-if="loading || detailsLoading" type="image" />
     <StorageRequest
       v-else
       :requestId="route.params.requestId"
       v-model="request"
       :enableModeration="route.query.enableModeration === 'true'"
+      :slotsLoading="request.slotsLoading"
+      :slotsFetched="request.slotsFetched"
     />
   </div>
 </template>