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); }