fixed domains fetching

src/components/DomainTable.vue

@@ -48,12 +48,18 @@
       </tr>
     </tbody>
   </table>
-  <!-- <div v-if="items.length" ref="target"></div> -->
+  <div class="center">
+    <RotateSquare2
+      v-if="isLoading"
+      style="width: 5rem; height: 5rem; margin-top: 3rem"
+    />
+    <p v-if="error">{{ error }}</p>
+  </div>
 </template>
 
 <script setup lang="ts">
 import type { CollectionItem } from "@/types";
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 import { computed, onMounted, ref, watch } from "vue";
 import Tooltip from "./Tooltip.vue";
 import { useRouter } from "vue-router";
@@ -62,6 +68,7 @@ import type { Zone } from "@/zone";
 import { convertAddress } from "@/utils";
 import { useStore } from "vuex";
 import { config } from "@/api";
+import RotateSquare2 from "../components/RotateSquare2.vue";
 
 const store = useStore();
 
@@ -75,16 +82,22 @@ const zonesAddresses = ref<(string | undefined)[]>([]);
 
 const items = ref<CollectionItem[]>([]);
 
+const isLoading = ref(false);
+const error = ref("");
+
 const address = computed(() =>
   store.getters.address ? convertAddress(store.getters.address) : ""
 );
 
-onMounted(async () => {
+const fetchDomains = async () => {
+  if (address.value) {
+    isLoading.value = true;
+
     const zones = (await get_zones()) as Zone[];
 
     zonesAddresses.value = zones.map(({ address }) => address?.toLowerCase());
 
-  if (address.value) {
+    try {
       const [
         resultNfts = { data: { nft_items: [] } },
         resultTonNfts = { data: { nft_items: [] } },
@@ -115,8 +128,20 @@ onMounted(async () => {
             zonesAddresses.value.includes(formattedCollectionAddress)
           ),
       ];
+    } catch (e) {
+      if ((e as AxiosError).response?.status) {
+        error.value = "You have made too many requests, please try again later";
+        console.log("too many requests");
       }
-});
+    } finally {
+      isLoading.value = false;
+    }
+  }
+};
+
+onMounted(fetchDomains);
+
+watch(address, fetchDomains);
 </script>
 
 <style scoped>