feat(graph): adds loading indicator

aeternity · Jun 25, 2024 · 56a9f50 · 56a9f50
1 parent 9313abc
commit 56a9f50
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/src/components/explore/PriceHistoryGraph.vue b/src/components/explore/PriceHistoryGraph.vue
@@ -14,7 +14,14 @@
     <Bar v-if="showBar" :data="graphData" :options="options" />
     <Line v-else :data="graphData" :options="options" />
     <div
-      v-if="showNoData"
+      v-if="loading"
+      class="absolute flex justify-center items-center w-full h-full top-0 left-0 text-3xl"
+      @click.prevent
+    >
+      Loading...
+    </div>
+    <div
+      v-if="showNoData && !loading"
       class="absolute flex justify-center items-center w-full h-full top-0 left-0 text-3xl"
       @click.prevent
     >
@@ -86,6 +93,7 @@ export default {
     x: { type: Array, required: true },
     initialChart: { type: String, default: 'Volume' },
     initialTimeFrame: { type: String, default: 'MAX' },
+    loading: { type: Boolean, default: false },
   },
   data() {
     return {

diff --git a/src/views/ExploreView.vue b/src/views/ExploreView.vue
@@ -3,7 +3,13 @@
     <div class="flex flex-row p-6 gap-6 items-center">
       <div class="flex-1">
         <h1 class="text-2xl">TVL</h1>
-        <PriceHistoryGraph v-if="graphData" :x="graphData.x" :datasets="tvl" initial-chart="TVL" />
+        <PriceHistoryGraph
+          v-if="graphData"
+          :x="graphData.x"
+          :datasets="tvl"
+          initial-chart="TVL"
+          :loading="loading"
+        />
       </div>
       <div class="flex-1">
         <h1 class="text-2xl">Volume</h1>
@@ -12,6 +18,7 @@
           :x="graphData.x"
           :datasets="volume"
           initial-chart="Volume"
+          :loading="loading"
         />
       </div>
     </div>
@@ -69,7 +76,7 @@ import PriceHistoryGraph from '@/components/explore/PriceHistoryGraph.vue';
 import PairTable from '@/components/explore/PairTable.vue';
 import TransactionTable from '@/components/explore/TransactionTable.vue';
 import DividerLine from '@/components/explore/DividerLine.vue';
-import { detectAndModifyWAE } from '@/lib/utils.js';
+import { detectAndModifyWAE } from '@/lib/utils';
 
 export default defineComponent({
   components: { DividerLine, TransactionTable, PairTable, PriceHistoryGraph, ExploreWrapper },
@@ -79,6 +86,7 @@ export default defineComponent({
       history: [],
       tokenMap: new Map(),
       activeTab: 'Pairs',
+      loading: false,
     };
   },
   computed: {
@@ -148,6 +156,7 @@ export default defineComponent({
     },
   },
   async mounted() {
+    this.loading = true;
     // fetch all tokens
     const tokens = await this.$store.dispatch('backend/getAllTokens');
     this.tokenMap = new Map(tokens.map((token) => [token.address, detectAndModifyWAE(token)]));
@@ -157,6 +166,7 @@ export default defineComponent({
 
     // fetch all history
     this.history = await this.$store.dispatch('backend/fetchHistory');
+    this.loading = false;
   },
   methods: {
     pairToToken(pairAddress) {

diff --git a/src/views/PoolDetailView.vue b/src/views/PoolDetailView.vue
@@ -6,7 +6,7 @@
     </div>
     <div class="flex">
       <div class="flex-1 flex-auto p-6">
-        <PriceHistoryGraph :datasets="graphData.datasets" :x="graphData.x" />
+        <PriceHistoryGraph :loading="loading" :datasets="graphData.datasets" :x="graphData.x" />
       </div>
       <div class="flex flex-col flex-auto mr-4">
         <div class="flex flex-row space-x-2 mb-4">
@@ -110,6 +110,7 @@ export default defineComponent({
       pairId: null,
       pair: null,
       history: [],
+      loading: false,
     };
   },
   computed: {
@@ -228,6 +229,7 @@ export default defineComponent({
     },
   },
   async mounted() {
+    this.loading = true;
     // extract param from URL
     this.pairId = this.$route.params.id;
 
@@ -245,6 +247,8 @@ export default defineComponent({
     this.history = await this.$store.dispatch('backend/fetchHistory', {
       pairAddress: this.pairId,
     });
+
+    this.loading = false;
   },
   methods: { shortenAddress },
 });

diff --git a/src/views/TokenDetailView.vue b/src/views/TokenDetailView.vue
@@ -6,7 +6,7 @@
     </div>
     <div class="flex">
       <div class="flex-auto p-6">
-        <PriceHistoryGraph :datasets="graphData.datasets" :x="graphData.x" />
+        <PriceHistoryGraph :datasets="graphData.datasets" :x="graphData.x" :loading="loading" />
       </div>
       <div class="flex flex-col flex-auto mr-4">
         <div class="flex flex-row space-x-2 mb-4">
@@ -120,6 +120,7 @@ export default defineComponent({
         holders: 0,
         initial_supply: 0,
       },
+      loading: false,
     };
   },
   computed: {
@@ -247,6 +248,7 @@ export default defineComponent({
     },
   },
   async mounted() {
+    this.loading = true;
     // extract param from URL
     this.tokenId = this.$route.params.id;
 
@@ -282,7 +284,7 @@ export default defineComponent({
     this.history = await this.$store.dispatch('backend/fetchHistory', {
       tokenAddress: this.tokenId,
     });
-
+    this.loading = false;
     // TODO fetch the tokens pairs from the new pair endpoint
   },
   methods: {