Incorrect volume/image displayed for listing

frontend/marketplace/src/components/AuctionCard.vue

@@ -6,14 +6,19 @@ import { formatDenom } from "@/utils/wallet-utils";
 import { onMounted, ref } from "vue";
 import CustomImage from "@/components/CustomImage.vue";
 import tracking, { TrackEvents } from "@/utils/analytics";
+import CustomSpinner from "./CustomSpinner.vue";
 export interface AuctionCardProps {
   auctionData: any;
 }
 const props = defineProps<AuctionCardProps>();
 const denom = ref("");
+const showSpinner = ref(true);
 
 onMounted(async () => {
   denom.value = await formatDenom(props.auctionData?.pricePerCreditDenom);
+  if (props.auctionData?.creditCollection?.creditData?.nodes[0].mediaFiles?.nodes[0].url !== "") {
+    showSpinner.value = false;
+  }
 });
 
 const handleViewDetailsClick = () => {
@@ -26,15 +31,20 @@ const handleViewDetailsClick = () => {
 </script>
 <template>
   <div class="bg-lightBlack rounded-lg md:rounded-sm">
-    <CustomImage
-      image-class="h-[250px] w-full rounded-lg"
-      :src="
-        convertIPFStoHTTPS(
-          auctionData?.creditCollection?.creditData?.nodes[0].mediaFiles
-            ?.nodes[0].url,
-        ) || auctionCard
-      "
-    />
+    <div v-if="showSpinner">
+      <CustomSpinner :visible="showSpinner" />
+    </div>
+    <div v-else="!showSpinner">
+      <CustomImage
+        image-class="h-[250px] w-full rounded-lg"
+        :src="
+          convertIPFStoHTTPS(
+            auctionData?.creditCollection?.creditData?.nodes[0].mediaFiles
+              ?.nodes[0].url,
+          ) || auctionCard
+        "
+      />
+    </div>
     <div class="grid grid-cols-2 p-3 gap-4">
       <div>
         <div>

frontend/marketplace/src/components/AuctionResultsCard.vue

@@ -13,6 +13,7 @@ import { formatDenom } from "@/utils/wallet-utils";
 import { computed, onMounted, ref } from "vue";
 import CustomImage from "@/components/CustomImage.vue";
 import tracking, { TrackEvents } from "@/utils/analytics";
+import CustomSpinner from "./CustomSpinner.vue";
 
 export interface AuctionResultsCardProps {
   cardData: MarketplaceListing & {
@@ -35,7 +36,14 @@ interface CardDetailsList {
 
 const props = defineProps<AuctionResultsCardProps>();
 const denom = ref("");
+const volume = computed(() => {
+  return (
+    parseInt(props.cardData.creditCollection.retiredAmount) +
+    parseInt(props.cardData.creditCollection.activeAmount)
+  );
+});
 const cardDetailsList = ref<CardDetailsList>();
+const showSpinner = ref(true);
 const applicant = computed<string>(() => {
   return cardDetailsList.value?.applicant[0] ?? "";
 });
@@ -45,6 +53,7 @@ onMounted(async () => {
   cardDetailsList.value = getDetailsList(
     props.cardData.creditCollection.creditData.nodes,
   );
+  showSpinner.value = false;
 });
 
 const handleViewDetailsClick = () => {
@@ -59,10 +68,15 @@ const handleViewDetailsClick = () => {
   <div
     class="bg-auctionBackground md:bg-lightBlack rounded-lg font-Inter text-white my-5 md:p-3 md:grid md:grid-cols-5 min-h-[180px]"
   >
-    <CustomImage
-      :src="cardDetailsList?.thumbnailUrl || auctionCard"
-      image-class="max-h-[200px] w-full rounded-sm"
-    />
+    <div v-if="showSpinner">
+      <CustomSpinner :visible="showSpinner" />
+    </div>
+    <div v-else="!showSpinner">
+      <CustomImage
+        :src="cardDetailsList?.thumbnailUrl || auctionCard"
+        image-class="max-h-[200px] w-full rounded-sm"
+      />
+    </div>
 
     <!--      Details for Mobile UI-->
     <div class="grid grid-cols-2 p-5 gap-4 md:hidden">
@@ -130,7 +144,7 @@ const handleViewDetailsClick = () => {
       </div>
       <div class="col-span-1">
         <p class="details-title">Volume</p>
-        <p>{{ cardDetailsList?.volume }}kg</p>
+        <p>{{ volume }}kg</p>
       </div>
       <div class="col-span-1 text-right">
         <p class="text-title32 font-bold leading-7 mt-6">

frontend/marketplace/src/components/CustomSpinner.vue

@@ -5,7 +5,7 @@ export interface CustomSpinner {
 defineProps<CustomSpinner>();
 </script>
 <template>
-  <div v-if="visible" class="w-full flex justify-center">
-    <img src="../assets/spinner.svg" />
+  <div v-if="visible" class="w-full flex justify-center p-10">
+    <span class="loading loading-spinner loading-lg text-greenPrimary"></span>
   </div>
 </template>

frontend/marketplace/src/components/ImageGallery.vue

@@ -2,18 +2,21 @@
 import "vue3-carousel/dist/carousel.css";
 import { ref, watch } from "vue";
 import CustomImage from "@/components/CustomImage.vue";
+import CustomSpinner from "./CustomSpinner.vue";
 
 export interface ImageGalleryProps {
   imageArray: string[];
 }
 
 const props = defineProps<ImageGalleryProps>();
 const activeImageURL = ref(props.imageArray[0]);
+const showSpinner = ref(true);
 
 watch(
   () => props.imageArray,
   (newValue) => {
     activeImageURL.value = newValue[0];
+    showSpinner.value = false;
   },
 );
 
@@ -24,10 +27,15 @@ const handleActiveImage = (url: string) => {
 <template>
   <div class="grid grid-cols-6 gap-5 max-h-[500px] my-5 w-full">
     <div class="col-span-4 w-full">
-      <CustomImage
-        :src="activeImageURL"
-        image-class="rounded-sm h-[500px] w-full object-none"
-      />
+      <div v-if="showSpinner" class="rounded-sm h-[500px] w-full object-none"> 
+        <CustomSpinner :visible="showSpinner" />
+      </div>
+      <div v-else="!showSpinner">
+        <CustomImage
+          :src="activeImageURL"
+          image-class="rounded-sm h-[500px] w-full object-none"
+        />
+      </div>
     </div>
     <div class="max-h-[500px] px-3 col-span-2 overflow-auto">
       <button class="btn btn-circle scroll-button">
@@ -37,14 +45,19 @@ const handleActiveImage = (url: string) => {
         <img src="../assets/scrollBottomIcon.svg" />
       </button>
       <div class="grid grid-cols-2 gap-5">
-        <CustomImage
-          @click="handleActiveImage(url)"
-          :src="url"
-          image-class="rounded-sm h-[150px] w-full cursor-pointer"
-          v-for="url in imageArray"
-          :id="url"
-          :key="url"
-        />
+        <div v-if="showSpinner" class="rounded-sm h-[150px] w-full cursor-pointer">
+          <CustomSpinner :visible="showSpinner" />
+        </div>
+        <div v-if="showSpinner === false">
+          <CustomImage
+            @click="handleActiveImage(url)"
+            :src="url"
+            image-class="rounded-sm h-[150px] w-full cursor-pointer"
+            v-for="url in imageArray"
+            :id="url"
+            :key="url"
+          />
+        </div>
       </div>
     </div>
   </div>

frontend/marketplace/src/utils/query-builder.ts

@@ -194,6 +194,8 @@ export class ListingsQueryBuilder {
                     pricePerCreditDenom
                     creditCollection{
                         creditType
+                        retiredAmount
+                        activeAmount
                         creditData{
                             nodes{
                                 eventData{