From e9b5d9d2bf4d4ec52bdccfeedd162e84f5e1e337 Mon Sep 17 00:00:00 2001 From: Nya Candy Date: Fri, 8 Oct 2021 13:42:55 +0800 Subject: [PATCH 1/2] optimize: stop loading after followers/following page deactive --- src/views/Followers.vue | 39 +++++++++++++++++++++++++-------------- src/views/Followings.vue | 39 +++++++++++++++++++++++++-------------- 2 files changed, 50 insertions(+), 28 deletions(-) diff --git a/src/views/Followers.vue b/src/views/Followers.vue index 41ccb17..783f077 100644 --- a/src/views/Followers.vue +++ b/src/views/Followers.vue @@ -70,6 +70,7 @@ export default class Followers extends Vue { rns: string = ''; ethAddress: string = ''; lastRoute: string = ''; + isPageActive: boolean = false; async setupAddress() { const address = this.$route.params.address; @@ -92,23 +93,28 @@ export default class Followers extends Vue { if (rss3 && followersList) { for (const item of followersList) { - try { - const profile = (await rss3.profile.get(item)) || {}; - this.followerList.push({ - avatar: profile.avatar?.[0] || config.defaultAvatar, - username: profile.name || '', - bio: profile.bio || '', - address: item, - displayAddress: this.filter(item), - rns: '', - }); - } catch (e) { - console.log(item, e); - } + this.followerList.push({ + avatar: config.defaultAvatar, + username: '', + bio: '', + address: item, + displayAddress: this.filter(item), + rns: '', + }); } setTimeout(async () => { for (const item of this.followerList) { - item.rns = (await RNSUtils.addr2Name(item.address)).replace(config.rns.suffix, ''); + if (this.isPageActive) { + try { + const profile = (await rss3.profile.get(item.address)) || {}; + item.avatar = profile.avatar?.[0] || config.defaultAvatar; + item.username = profile.name || ''; + item.bio = profile.bio || ''; + item.rns = (await RNSUtils.addr2Name(item.address)).replace(config.rns.suffix, ''); + } catch (e) { + console.log(item, e); + } + } } }); } @@ -154,6 +160,7 @@ export default class Followers extends Vue { } async activated() { + this.isPageActive = true; await this.setupAddress(); setTimeout(async () => { await this.setupTheme(); @@ -164,6 +171,10 @@ export default class Followers extends Vue { } }, 0); } + + async deactivated() { + this.isPageActive = false; + } } diff --git a/src/views/Followings.vue b/src/views/Followings.vue index 79243df..42c253f 100644 --- a/src/views/Followings.vue +++ b/src/views/Followings.vue @@ -70,6 +70,7 @@ export default class Followings extends Vue { rns: string = ''; ethAddress: string = ''; lastRoute: string = ''; + isPageActive: boolean = false; async setupAddress() { const address = this.$route.params.address; @@ -92,23 +93,28 @@ export default class Followings extends Vue { if (rss3 && followersList) { for (const item of followersList) { - try { - const profile = await rss3.profile.get(item); - this.followingList.push({ - avatar: profile?.avatar?.[0] || config.defaultAvatar, - username: profile?.name || '', - bio: profile.bio || '', - address: item, - displayAddress: this.filter(item), - rns: '', - }); - } catch (e) { - console.log(item, e); - } + this.followingList.push({ + avatar: config.defaultAvatar, + username: '', + bio: '', + address: item, + displayAddress: this.filter(item), + rns: '', + }); } setTimeout(async () => { for (const item of this.followingList) { - item.rns = (await RNSUtils.addr2Name(item.address)).replace(config.rns.suffix, ''); + if (this.isPageActive) { + try { + const profile = (await rss3.profile.get(item.address)) || {}; + item.avatar = profile.avatar?.[0] || config.defaultAvatar; + item.username = profile.name || ''; + item.bio = profile.bio || ''; + item.rns = (await RNSUtils.addr2Name(item.address)).replace(config.rns.suffix, ''); + } catch (e) { + console.log(item, e); + } + } } }); } @@ -154,6 +160,7 @@ export default class Followings extends Vue { } async activated() { + this.isPageActive = true; await this.setupAddress(); setTimeout(async () => { await this.setupTheme(); @@ -164,6 +171,10 @@ export default class Followings extends Vue { } }, 0); } + + async deactivated() { + this.isPageActive = false; + } } From 7c8db2665732484b98e85eaef6eced9dad0f0bcf Mon Sep 17 00:00:00 2001 From: Nya Candy Date: Sun, 10 Oct 2021 11:20:44 +0800 Subject: [PATCH 2/2] feat: loading recover --- src/common/rss3.ts | 2 +- src/views/Followers.vue | 40 ++++++++++++++++++++++++-------------- src/views/Followings.vue | 42 ++++++++++++++++++++++++++-------------- 3 files changed, 54 insertions(+), 30 deletions(-) diff --git a/src/common/rss3.ts b/src/common/rss3.ts index e6355cc..cfc9d08 100644 --- a/src/common/rss3.ts +++ b/src/common/rss3.ts @@ -79,7 +79,7 @@ async function walletConnect(skipSign?: boolean) { return rss3; } -async function visitor() { +async function visitor(): Promise { if (rss3) { return rss3; } else { diff --git a/src/views/Followers.vue b/src/views/Followers.vue index 783f077..8b8aee4 100644 --- a/src/views/Followers.vue +++ b/src/views/Followers.vue @@ -71,6 +71,7 @@ export default class Followers extends Vue { ethAddress: string = ''; lastRoute: string = ''; isPageActive: boolean = false; + loadingNo: number = 0; async setupAddress() { const address = this.$route.params.address; @@ -86,6 +87,7 @@ export default class Followers extends Vue { async initLoad() { this.lastRoute = this.$route.fullPath; this.followerList = []; + this.loadingNo = 0; const rss3 = await RSS3.visitor(); const initFollowersList = await rss3.backlinks.get(this.ethAddress, 'following'); @@ -102,21 +104,29 @@ export default class Followers extends Vue { rns: '', }); } - setTimeout(async () => { - for (const item of this.followerList) { - if (this.isPageActive) { - try { - const profile = (await rss3.profile.get(item.address)) || {}; - item.avatar = profile.avatar?.[0] || config.defaultAvatar; - item.username = profile.name || ''; - item.bio = profile.bio || ''; - item.rns = (await RNSUtils.addr2Name(item.address)).replace(config.rns.suffix, ''); - } catch (e) { - console.log(item, e); - } - } + setTimeout(() => { + this.loadDetails(rss3); + }, 0); + } + } + + async loadDetails(rss3: IRSS3) { + const startNo = this.loadingNo; + const endNo = this.followerList.length; + for (let i = startNo; i < endNo; i++) { + if (this.isPageActive) { + const item = this.followerList[i]; + try { + const profile = (await rss3.profile.get(item.address)) || {}; + item.avatar = profile.avatar?.[0] || config.defaultAvatar; + item.username = profile.name || ''; + item.bio = profile.bio || ''; + item.rns = (await RNSUtils.addr2Name(item.address)).replace(config.rns.suffix, ''); + } catch (e) { + console.log(item, e); } - }); + this.loadingNo = i; + } } } @@ -168,6 +178,8 @@ export default class Followers extends Vue { if (this.lastRoute !== this.$route.fullPath) { await this.setProfile(); await this.initLoad(); + } else if (this.loadingNo < this.followerList.length) { + await this.loadDetails(await RSS3.visitor()); } }, 0); } diff --git a/src/views/Followings.vue b/src/views/Followings.vue index 42c253f..058c040 100644 --- a/src/views/Followings.vue +++ b/src/views/Followings.vue @@ -39,7 +39,7 @@ import { Options, Vue } from 'vue-class-component'; import Button from '@/components/Button.vue'; import ImgHolder from '@/components/ImgHolder.vue'; import FollowerCard from '@/components/FollowerCard.vue'; -import RSS3 from '@/common/rss3'; +import RSS3, { IRSS3 } from '@/common/rss3'; import RNSUtils from '@/common/rns'; import config from '@/config'; import * as _ from 'lodash'; @@ -71,6 +71,7 @@ export default class Followings extends Vue { ethAddress: string = ''; lastRoute: string = ''; isPageActive: boolean = false; + loadingNo: number = 0; async setupAddress() { const address = this.$route.params.address; @@ -86,6 +87,7 @@ export default class Followings extends Vue { async initLoad() { this.lastRoute = this.$route.fullPath; this.followingList = []; + this.loadingNo = 0; const rss3 = await RSS3.visitor(); const initFollowersList = (await rss3.links.get(this.ethAddress, 'following'))?.list || []; @@ -102,21 +104,29 @@ export default class Followings extends Vue { rns: '', }); } - setTimeout(async () => { - for (const item of this.followingList) { - if (this.isPageActive) { - try { - const profile = (await rss3.profile.get(item.address)) || {}; - item.avatar = profile.avatar?.[0] || config.defaultAvatar; - item.username = profile.name || ''; - item.bio = profile.bio || ''; - item.rns = (await RNSUtils.addr2Name(item.address)).replace(config.rns.suffix, ''); - } catch (e) { - console.log(item, e); - } - } + setTimeout(() => { + this.loadDetails(rss3); + }, 0); + } + } + + async loadDetails(rss3: IRSS3) { + const startNo = this.loadingNo; + const endNo = this.followingList.length; + for (let i = startNo; i < endNo; i++) { + if (this.isPageActive) { + const item = this.followingList[i]; + try { + const profile = (await rss3.profile.get(item.address)) || {}; + item.avatar = profile.avatar?.[0] || config.defaultAvatar; + item.username = profile.name || ''; + item.bio = profile.bio || ''; + item.rns = (await RNSUtils.addr2Name(item.address)).replace(config.rns.suffix, ''); + } catch (e) { + console.log(item, e); } - }); + this.loadingNo = i; + } } } @@ -168,6 +178,8 @@ export default class Followings extends Vue { if (this.lastRoute !== this.$route.fullPath) { await this.setProfile(); await this.initLoad(); + } else if (this.loadingNo < this.followingList.length) { + await this.loadDetails(await RSS3.visitor()); } }, 0); }