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,48 +82,66 @@ 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 zones = (await get_zones()) as Zone[];
+const fetchDomains = async () => {
+  if (address.value) {
+    isLoading.value = true;
+
+    const zones = (await get_zones()) as Zone[];
 
-  zonesAddresses.value = zones.map(({ address }) => address?.toLowerCase());
+    zonesAddresses.value = zones.map(({ address }) => address?.toLowerCase());
 
-  if (address.value) {
-    const [
-      resultNfts = { data: { nft_items: [] } },
-      resultTonNfts = { data: { nft_items: [] } },
-    ] = await Promise.all([
-      axios.get<{ nft_items: CollectionItem[] }>(
-        `${config.ton_api_url}accounts/${address.value}/nfts`
-      ),
-      axios.get<{ nft_items: CollectionItem[] }>(
-        `${config.ton_api_url}accounts/${address.value}/nfts`,
-        {
-          params: {
-            collection: "EQC3dNlesgVD8YbAazcauIrXBPfiVhMMr5YYk2in0Mtsz0Bz",
-          },
-        }
-      ),
-    ]);
-
-    items.value = [
-      ...resultTonNfts.data.nft_items,
-      ...resultNfts.data.nft_items
-        .map((item) => ({
-          ...item,
-          formattedCollectionAddress: item.collection?.address
-            ? convertAddress(item.collection?.address).toLowerCase()
-            : "",
-        }))
-        .filter(({ formattedCollectionAddress }) =>
-          zonesAddresses.value.includes(formattedCollectionAddress)
+    try {
+      const [
+        resultNfts = { data: { nft_items: [] } },
+        resultTonNfts = { data: { nft_items: [] } },
+      ] = await Promise.all([
+        axios.get<{ nft_items: CollectionItem[] }>(
+          `${config.ton_api_url}accounts/${address.value}/nfts`
         ),
-    ];
+        axios.get<{ nft_items: CollectionItem[] }>(
+          `${config.ton_api_url}accounts/${address.value}/nfts`,
+          {
+            params: {
+              collection: "EQC3dNlesgVD8YbAazcauIrXBPfiVhMMr5YYk2in0Mtsz0Bz",
+            },
+          }
+        ),
+      ]);
+
+      items.value = [
+        ...resultTonNfts.data.nft_items,
+        ...resultNfts.data.nft_items
+          .map((item) => ({
+            ...item,
+            formattedCollectionAddress: item.collection?.address
+              ? convertAddress(item.collection?.address).toLowerCase()
+              : "",
+          }))
+          .filter(({ formattedCollectionAddress }) =>
+            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>