feat: add loading bar and skeleton (#493)

* fix: change let with const * feat: add loading bar on genetic data flow * fix: remove log
debionetwork · Jun 23, 2022 · e388782 · e388782
1 parent 3703359
commit e388782
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 129 deletions.
diff --git a/src/common/lib/metamask/index.js b/src/common/lib/metamask/index.js
@@ -18,15 +18,15 @@ export async function handleChainChanged(newChainId) {
 
 export async function connectToMetamask() {
   try {
-    let accounts = await window.ethereum.request({ method: "eth_requestAccounts" })
-    let currentAccount = await handleAccountsChanged(accounts, null)
+    const accounts = await window.ethereum.request({ method: "eth_requestAccounts" })
+    const currentAccount = await handleAccountsChanged(accounts, null)
 
     window.ethereum.on("accountsChanged", (accounts) => {
       store.commit("metamask/SET_WALLET_ADDRESS", { currentAccount: currentAccount, accountList: accounts })
       handleAccountsChanged(accounts, null)
     })
 
-    let network = await window.ethereum.request({ method: "eth_chainId"})
+    const network = await window.ethereum.request({ method: "eth_chainId"})
     window.ethereum.on("chainChanged", handleChainChanged)
     return { currentAccount: currentAccount, accountList: accounts, network }
   }

diff --git a/src/views/Dashboard/Customer/Home/GeneticData/Add.vue b/src/views/Dashboard/Customer/Home/GeneticData/Add.vue
@@ -9,7 +9,13 @@
       )
 
       .genetic-data-add__title {{ isEdit ? "Edit Genetic Data" : "Add Genetic Data"}}
-      .genetic-data-add__forms
+      .genetic-data-add__forms(v-if="loadingData" )
+        v-skeleton-loader(
+          v-bind="attrs"
+          type="table-cell, list-item, table-cell, list-item-three-line, text, table-heading, text, card-heading "
+        )
+
+      .genetic-data-add__forms(v-if="!loadingData" )
         ui-debio-input(
           :rules="$options.rules.document.title"
           v-model="document.title"
@@ -145,7 +151,8 @@ export default {
     dataId: null,
     error: null,
     orderId: null,
-    isUpdated: false
+    isUpdated: false,
+    loadingData: false
   }),
 
   computed: {
@@ -226,37 +233,47 @@ export default {
       immediate: true,
       handler: generalDebounce(async function() {
         await this.getTxWeight()
+        if (this.document.file) {
+          this.loadingData = false
+        }
       }, 500)
     }
   },
 
   methods: {
 
     async getDetails() {
-      const detail = await queryGeneticDataById(this.api, this.dataId)
-      this.document.title = detail.title
-      this.document.description = detail.description
-      const link = JSON.parse(detail.reportLink)  
-      const fileName = link[0].split("/").pop()
-      const res = await downloadFile(link[0])
-
-      let { box, nonce } = res.data.data
-      box = Object.values(box) // Convert from object to Array
-      nonce = Object.values(nonce) // Convert from object to Array
-
-      const toDecrypt = {
-        box: Uint8Array.from(box),
-        nonce: Uint8Array.from(nonce)
+      this.loadingData = true
+      try {
+        const detail = await queryGeneticDataById(this.api, this.dataId)
+        this.document.title = detail.title
+        this.document.description = detail.description
+        const link = JSON.parse(detail.reportLink)
+        const fileName = link[0].split("/").pop()
+        const res = await downloadFile(link[0])
+
+        let { box, nonce } = res.data.data
+        box = Object.values(box) // Convert from object to Array
+        nonce = Object.values(nonce) // Convert from object to Array
+
+        const toDecrypt = {
+          box: Uint8Array.from(box),
+          nonce: Uint8Array.from(nonce)
+        }
+        console.log("Decrypting...")
+        const decryptedObject = await Kilt.Utils.Crypto.decryptAsymmetric(
+          toDecrypt,
+          this.publicKey,
+          this.secretKey
+        )
+
+        const blob = new Blob([decryptedObject], { type: "text/directory" })
+        console.log("Decrypted!")
+        this.document.file = new File([blob], fileName)
+      } catch (error) {
+        console.error(error)
+        this.loadingData = false
       }
-      console.log("Decrypting...")
-      const decryptedObject = await Kilt.Utils.Crypto.decryptAsymmetric(
-        toDecrypt, 
-        this.publicKey, 
-        this.secretKey
-      )
-      const blob = new Blob([decryptedObject], { type: "text/directory" })
-      console.log("Decrypted!")
-      this.document.file = new File([blob], fileName)
     },
 
     initialDataKey() {

diff --git a/src/views/Dashboard/Customer/Home/GeneticData/GeneticAnalysisList.vue b/src/views/Dashboard/Customer/Home/GeneticData/GeneticAnalysisList.vue
@@ -5,6 +5,7 @@
       :items="items"
       :sort-by="['timestamp']"
       :sort-desc="[true]"
+      :loading="loadingData"
     )
       template(v-slot:[`item.serviceName`]="{ item }")
         .d-flex.flex-column.genetic-analysis-list__service
@@ -100,7 +101,8 @@ export default {
     iconShow: true, //temporary disable.
     iconDownloadShow: false,
     publicKey: null,
-    secretKey: null
+    secretKey: null,
+    loadingData: false
   }),
 
   watch: {
@@ -136,38 +138,46 @@ export default {
     },
 
     async fetchGeneticAnalysisData() {
-      this.items = []
-      const orderList = await queryGeneticAnalysisOrderByCustomerId(this.api, this.wallet.address)
-      const paidOrder = []
-
-      orderList.forEach( order => {
-        const status = order.status
-        if (status === "Paid" || status === "Refunded" || status === "Fulfilled") {
-          paidOrder.push(order)
-        }
-      })
-
-      paidOrder.forEach( async order => {
-        const { geneticAnalysisTrackingId, sellerId, serviceId, id, createdAt, updatedAt} = order
-        const geneticAnalysis = await queryGeneticAnalysisByGeneticAnalysisTrackingId(this.api, geneticAnalysisTrackingId)
-        const analystInfo = await queryGeneticAnalystByAccountId(this.api, sellerId)
-        const geneticAnalysisService = await queryGeneticAnalystServicesByHashId(this.api, serviceId)
-        const timestamp = geneticAnalysis.createdAt
-
-        const data = {
-          trackingId: geneticAnalysisTrackingId,
-          orderId: id,
-          serviceName: geneticAnalysisService.info.name,
-          analystName: `${analystInfo.info.firstName} ${analystInfo.info.lastName}`,
-          analystInfo,
-          createdAt: this.formatDate(createdAt),
-          updatedAt: this.formatDate(updatedAt),
-          status: this.getStatus(geneticAnalysis.status),
-          ipfsLink:  geneticAnalysis.reportLink,
-          timestamp
-        }
-        this.items.push(data)
-      })
+      this.loadingData = true
+
+      try {
+        this.items = []
+        const orderList = await queryGeneticAnalysisOrderByCustomerId(this.api, this.wallet.address)
+        const paidOrder = []
+  
+        orderList.forEach( order => {
+          const status = order.status
+          if (status === "Paid" || status === "Refunded" || status === "Fulfilled") {
+            paidOrder.push(order)
+          }
+        })
+  
+        paidOrder.forEach( async order => {
+          const { geneticAnalysisTrackingId, sellerId, serviceId, id, createdAt, updatedAt} = order
+          const geneticAnalysis = await queryGeneticAnalysisByGeneticAnalysisTrackingId(this.api, geneticAnalysisTrackingId)
+          const analystInfo = await queryGeneticAnalystByAccountId(this.api, sellerId)
+          const geneticAnalysisService = await queryGeneticAnalystServicesByHashId(this.api, serviceId)
+          const timestamp = geneticAnalysis.createdAt
+  
+          const data = {
+            trackingId: geneticAnalysisTrackingId,
+            orderId: id,
+            serviceName: geneticAnalysisService.info.name,
+            analystName: `${analystInfo.info.firstName} ${analystInfo.info.lastName}`,
+            analystInfo,
+            createdAt: this.formatDate(createdAt),
+            updatedAt: this.formatDate(updatedAt),
+            status: this.getStatus(geneticAnalysis.status),
+            ipfsLink:  geneticAnalysis.reportLink,
+            timestamp
+          }
+          this.items.push(data)
+        })
+        this.loadingData = false
+      } catch (error) {
+        console.error(error)
+        this.loadingData = false
+      }
     },
 
     toDetail(item) {

diff --git a/src/views/Dashboard/Customer/Home/GeneticData/GeneticDataList.vue b/src/views/Dashboard/Customer/Home/GeneticData/GeneticDataList.vue
@@ -10,6 +10,7 @@
     ui-debio-data-table(
       :headers="headers"
       :items="items"
+      :loading="loadingData"
     )
       template(v-slot:[`item.title`]="{ item }")
         .d-flex.flex-column.genetic-data-list__title
@@ -95,7 +96,8 @@ export default {
     isDeleting: false,
     selectedDataId: null,
     txWeight: 0,
-    error: null
+    error: null,
+    loadingData: false
   }),
 
   watch: {
@@ -121,34 +123,40 @@ export default {
 
   methods: {
     async fetchGeneticData() {
-      this.items = []
-      const accountId = this.wallet.address
-      const dataList = await queryGeneticDataByOwnerId(this.api, accountId)
-
-      for (const {id, owenerId, reportLink, title, description, createdAt, updatedAt} of dataList) {
+      try {
+        this.loadingData = true
+        this.items = []
+        const accountId = this.wallet.address
+        const dataList = await queryGeneticDataByOwnerId(this.api, accountId)
+
+        for (const {id, owenerId, reportLink, title, description, createdAt, updatedAt} of dataList) {
+
+          let uploadAt
+          if (updatedAt !== "0") {
+            uploadAt = this.formatDate(updatedAt)
+          } else {
+            uploadAt = this.formatDate(createdAt)
+          }
 
-        let uploadAt
-        if (updatedAt !== "0") {
-          uploadAt = this.formatDate(updatedAt)
-        } else {
-          uploadAt = this.formatDate(createdAt)
+          const item = { id, owenerId, reportLink, title, description, uploadAt }
+          this.items.push(item)
+          
         }
 
-        const item = { id, owenerId, reportLink, title, description, uploadAt }
-        this.items.push(item)
-        
+        this.items.sort((a, b) => {
+          if(new Date(a.uploadAt) < new Date(b.uploadAt)) {
+            return 1
+          } 
+          if  (new Date(a.uploadAt) > new Date(b.uploadAt)) {
+            return -1
+          } 
+          return 0
+        })
+        this.loadingData = false
+      } catch (error) {
+        console.error(error)
+        this.loadingData = false
       }
-
-      this.items.sort((a, b) => {
-        if(new Date(a.uploadAt) < new Date(b.uploadAt)) {
-          return 1
-        } 
-        if  (new Date(a.uploadAt) > new Date(b.uploadAt)) {
-          return -1
-        } 
-        return 0
-      })
-
     },
 
     onEdit(item) {