add toast notification when loading recent storage events

src/App.vue

@@ -4,14 +4,17 @@ import { useRequestsStore } from '@/stores/requests'
 import { RouterView } from 'vue-router'
 import Balance from '@/components/Balance.vue'
 import BlockNumber from '@/components/BlockNumber.vue'
+import ToastNotification from '@/components/toasts/ToastNotification.vue'
 import AppNav from '@/components/AppNav.vue'
 import ContractEventAlerts from '@/components/ContractEventAlerts.vue'
 import { initDrawers, initDismisses } from 'flowbite'
 import NavBreadcrumb from './components/NavBreadcrumb.vue'
+import { storeToRefs } from 'pinia'
 
 const alerts = ref([])
 const id = ref(0)
 const requestsStore = useRequestsStore()
+const { loadingRecent } = storeToRefs(requestsStore)
 
 function addAlert(type, event, state) {
   alerts.value.push({
@@ -181,6 +184,11 @@ onUnmounted(() => {
       <Balance />
       <BlockNumber />
     </footer>
+    <ToastNotification
+      class="fixed bottom-5 right-5"
+      v-if="loadingRecent"
+      text="Loading recent storage requests..."
+    ></ToastNotification>
   </div>
 </template>
 

src/components/toasts/ToastNotification.vue

@@ -0,0 +1,17 @@
+<script setup>
+import SpinnerLoading from '../SpinnerLoading.vue';
+
+defineProps({
+  text: String
+})
+</script>
+
+<template>
+<div id="toast-simple" class="flex items-center w-full max-w-xs p-4 space-x-4 rtl:space-x-reverse text-gray-500 bg-white divide-x rtl:divide-x-reverse divide-gray-200 rounded-lg shadow dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800" role="alert">
+  <SpinnerLoading></SpinnerLoading>
+  <!-- <svg class="w-5 h-5 text-blue-600 dark:text-blue-500 rotate-45" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 17 8 2L9 1 1 19l8-2Zm0 0V9"/>
+    </svg> -->
+  <div class="ps-4 text-sm font-normal">{{ text }}</div>
+</div>
+</template>

src/stores/requests.js

@@ -380,6 +380,7 @@ export const useRequestsStore = defineStore(
       fetchRequestDetails,
       listenForNewEvents,
       loading,
+      loadingRecent,
       fetched
     }
   },