Handle properly the display of "Loading…" and "No Data" in VerifiedCo…

…ntractTable. Signed-off-by: Simon Viénot <[email protected]>
hashgraph · Feb 20, 2024 · 4ebe2c1 · 4ebe2c1
1 parent 16eb4d6
commit 4ebe2c1
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/src/components/EmptyTable.vue b/src/components/EmptyTable.vue
@@ -24,7 +24,7 @@
 
 <template>
   <div class="has-text-centered h-is-tertiary-text-text has-text-grey mb-4">
-    <span v-if="initialLoading">Loading…</span>
+    <span v-if="initialLoading || loading">Loading…</span>
     <span v-else>No Data</span>
   </div>
 </template>
@@ -41,6 +41,13 @@ import {initialLoadingKey} from "@/AppKeys";
 export default defineComponent({
   name: "EmptyTable",
 
+  props: {
+      loading: {
+          type: Boolean,
+          default: false
+      }
+  },
+
   setup() {
     const initialLoading = inject(initialLoadingKey, ref(false))
     return { initialLoading }

diff --git a/src/components/contract/VerifiedContractTable.vue b/src/components/contract/VerifiedContractTable.vue
@@ -62,7 +62,7 @@
 
   </o-table>
 
-  <EmptyTable v-if="contracts.length === 0"/>
+  <EmptyTable v-if="contracts.length === 0" :loading="!loaded"/>
 
 </template>
 
@@ -122,6 +122,7 @@ export default defineComponent({
       handleClick,
       ORUGA_MOBILE_BREAKPOINT,
       contracts,
+      loaded: props.contractsLookup.loaded
     }
   }
 });

diff --git a/src/utils/cache/VerifiedContractsCache.ts b/src/utils/cache/VerifiedContractsCache.ts
@@ -125,6 +125,8 @@ export class VerifiedContractsLookup extends SingletonLookup<Contract[]> impleme
     private refreshCount = 0
     private autoRefreshRef: Ref<boolean> = ref(true)
 
+    public loaded = ref(false)
+
     constructor(cache: VerifiedContractsCache) {
         super(cache)
     }
@@ -134,10 +136,12 @@ export class VerifiedContractsLookup extends SingletonLookup<Contract[]> impleme
             this.scheduleNextRefresh()
         }
         this.entity.value = await this.cache.lookup()
+        this.loaded.value = true
     }
 
     public unmount(): void {
         this.entity.value = null
+        this.loaded.value = false
         if (this.timeoutID != -1) {
             window.clearTimeout(this.timeoutID)
             this.timeoutID = -1