lazyload chain status

package.json

@@ -67,6 +67,7 @@
     "vue-form-wizard": "0.8.4",
     "vue-i18n": "8.22.2",
     "vue-loader": "^15.9.6",
+    "vue-observe-visibility": "^1.0.0",
     "vue-perfect-scrollbar": "0.2.1",
     "vue-prism-component": "1.1.1",
     "vue-qr": "^2.5.0",

src/main.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { ObserveVisibility } from 'vue-observe-visibility'
 import { ToastPlugin, ModalPlugin } from 'bootstrap-vue'
 import VueCompositionAPI from '@vue/composition-api'
 import messages from '@/lang'
@@ -19,6 +20,7 @@ import '@/libs/portal-vue'
 import '@/libs/toastification'
 import '@/libs/clipboard'
 
+Vue.directive('observe-visibility', ObserveVisibility)
 // Vue.use(VueGtag, { config: { id: 'UA-238887-1' } }, router)
 
 Vue.use(VueI18n)

src/views/Home.vue

@@ -40,6 +40,7 @@
         <b-col
           v-for="(data,index) in chains"
           :key="index"
+          v-observe-visibility="(visible) => visibilityChanged(visible, data)"
           md="3"
           sm="6"
         >
@@ -150,29 +151,27 @@ export default {
       return this.downImg
     },
   },
-  created() {
-    this.fetch()
-    this.timer = setInterval(this.fetch, 120000)
-  },
-  beforeDestroy() {
-    clearInterval(this.timer)
-  },
   methods: {
-    fetch() {
+    fetch(k) {
-      Object.keys(this.chains).forEach(k => {
+      const chain = this.chains[k]
-        const chain = this.chains[k]
+      if (chain.api) {
         const index = localStorage.getItem(`${chain.chain_name}-api-index`) || 0
-        if (chain.api) {
+        const host = Array.isArray(chain.api) ? chain.api[index] : chain.api
-          const host = Array.isArray(chain.api) ? chain.api[index] : chain.api
+        fetch(`${host}/blocks/latest`).then(res => res.json()).then(b => {
-          fetch(`${host}/blocks/latest`).then(res => res.json()).then(b => {
+          const { header } = b.block
-          // console.log(b.block.header)
+          this.$set(chain, 'height', header.height)
-            const { header } = b.block
+          this.$set(chain, 'time', toDay(header.time))
-            this.$set(chain, 'height', header.height)
+          this.$set(chain, 'variant', timeIn(header.time, 3, 'm') ? 'danger' : 'success')
-            this.$set(chain, 'time', toDay(header.time))
+        })
-            this.$set(chain, 'variant', timeIn(header.time, 3, 'm') ? 'danger' : 'success')
+      }
-          })
+    },
-        }
+    visibilityChanged(isVisible, chain) {
-      })
+      this.isVisible = isVisible
+      const idle = this.chains[chain.chain_name]
+      if (isVisible && !idle.loaded) {
+        this.$set(idle, 'loaded', true)
+        this.fetch(chain.chain_name)
+      }
     },
   },
 }

yarn.lock

@@ -9909,6 +9909,11 @@ vue-loader@^15.9.6:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-observe-visibility@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz#17cf1b2caf74022f0f3c95371468ddf2b9573152"
+  integrity sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg==
+
 vue-perfect-scrollbar@0.2.1:
   version "0.2.1"
   resolved "https://registry.npmjs.org/vue-perfect-scrollbar/-/vue-perfect-scrollbar-0.2.1.tgz"