improve loading strategy

src/views/Governance.vue

@@ -51,6 +51,14 @@
             </router-link></b-card-title>
           <b-card-body md="12">
             <div class="gov-wrapper d-flex flex-wrap">
+              <div class="gov">
+                <p class="card-text mb-25">
+                  Type
+                </p>
+                <h6 class="mb-0">
+                  {{ formatType(p.contents['@type']) }}
+                </h6>
+              </div>
               <div class="gov">
                 <p class="card-text mb-25">
                   Start Date
@@ -75,14 +83,6 @@
                   {{ formatToken(p.total_deposit) || '-' }}
                 </h6>
               </div>
-              <div class="gov">
-                <p class="card-text mb-25">
-                  Turnout
-                </p>
-                <h6 class="mb-0">
-                  {{ percent(p.tally.turnout) }}%
-                </h6>
-              </div>
             </div>
           </b-card-body>
 
@@ -177,6 +177,18 @@
         </b-card>
       </b-col>
     </b-row>
+    <b-row v-if="next">
+      <b-col>
+        <b-button
+          block
+          variant="outline-primary"
+          :disabled="loading"
+          @click="getList()"
+        >
+          Load More
+        </b-button>
+      </b-col>
+    </b-row>
     <operation-modal
       :type="operationModalType"
       :proposal-id="selectedProposalId"
@@ -190,7 +202,6 @@ import {
   BCard, BCardTitle, BCardBody, BCardFooter, BButton, BProgressBar, BProgress, BBadge, BTooltip, BRow, BCol, VBModal,
 } from 'bootstrap-vue'
 import Ripple from 'vue-ripple-directive'
-import { Proposal } from '@/libs/data'
 import { percent, tokenFormatter } from '@/libs/utils'
 import dayjs from 'dayjs'
 import OperationModal from '@/views/components/OperationModal/index.vue'
@@ -218,15 +229,21 @@ export default {
     return {
       selectedProposalId: 0,
       selectedTitle: '',
-      proposals: [new Proposal()],
+      proposals: [],
       max: 1,
       operationModalType: '',
+      next: null,
     }
   },
   mounted() {
     this.getList()
   },
   methods: {
+    formatType(v) {
+      const txt = String(v).replace('Proposal', '')
+      const index = txt.lastIndexOf('.')
+      return index > 0 ? txt.substring(index + 1) : txt
+    },
     percent: v => percent(v),
     formatDate: v => dayjs(v).format('YYYY-MM-DD'),
     formatToken: v => tokenFormatter(v, {}),
@@ -236,25 +253,31 @@ export default {
       this.selectedTitle = title
     },
     getList() {
-      this.$http.getGovernanceList().then(res => {
-        const voting = res.filter(i => i.status === 2)
-        if (voting.length > 0) {
-          let i = 0
-          Promise.all(voting.reverse().map(p => this.$http.getGovernanceTally(p.id, p.tally.total))).then(update => {
-            this.proposals.map(x => {
-              if (x.status === 2) {
-                const xh = x
-                xh.tally = update[i]
-                i += 1
-                return xh
-              }
-              return x
-            })
-          })
-        }
-        this.proposals = res.reverse()
+      this.loading = true
+      this.$http.getGovernanceList(this.next).then(res => {
+        this.proposals = this.proposals.concat(res.proposals)
+        this.updateTally(this.proposals)
+        this.next = res.pagination.next_key
+        this.loading = false
       })
     },
+    updateTally(res) {
+      const voting = res.filter(i => i.status === 2)
+      if (voting.length > 0) {
+        let i = 0
+        Promise.all(voting.reverse().map(p => this.$http.getGovernanceTally(p.id, 0))).then(update => {
+          this.proposals.map(x => {
+            if (x.status === 2) {
+              const xh = x
+              xh.tally = update[i]
+              i += 1
+              return xh
+            }
+            return x
+          })
+        })
+      }
+    },
   },
 }
 </script>