fix waiting component to be rendered by adding the function to render listing component on unMounted lifecycle

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -10,7 +10,7 @@ import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
-import { ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import ListingComponent from "../ListingComponent/ListingComponent.vue";
 
 // props
@@ -65,16 +65,17 @@ const callWithdraw = async (amount: string) => {
   }
 };
 
-await getWalletTransactions();
-
 // Emits
 const emit = defineEmits(["makeAnotherTransaction"]);
 
 // observer
 watch(props, async (): Promise<void> => {
-  console.log(props);
   if (props.isCurrentStep) await getWalletTransactions();
 });
+
+onMounted(async () => {
+  await getWalletTransactions();
+});
 </script>
 
 <template>

src/views/HomeView.vue

@@ -11,6 +11,7 @@ import { addLock, releaseLock } from "@/blockchain/buyerMethods";
 import { updateWalletStatus, checkUnreleasedLock } from "@/blockchain/wallet";
 import { getNetworksLiquidity } from "@/blockchain/events";
 import type { ValidDeposit } from "@/model/ValidDeposit";
+import router from "@/router";
 
 enum Step {
   Search,
@@ -67,7 +68,7 @@ const releaseTransaction = async (e2eId: string) => {
       e2eId,
       lockID.value
     );
-    release.wait();
+    await release.wait();
 
     await updateWalletStatus();
     loadingRelease.value = false;
@@ -87,10 +88,6 @@ const checkForUnreleasedLocks = async (): Promise<void> => {
   }
 };
 
-if (walletAddress.value) {
-  await checkForUnreleasedLocks();
-}
-
 watch(walletAddress, async () => {
   await checkForUnreleasedLocks();
 });
@@ -101,6 +98,7 @@ watch(networkName, async () => {
 
 onMounted(async () => {
   await getNetworksLiquidity();
+  if (walletAddress.value) await checkForUnreleasedLocks();
 });
 </script>