feat: loading recover

NaturalSelectionLabs · Oct 10, 2021 · 7c8db26 · 7c8db26
1 parent e9b5d9d
commit 7c8db26
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 30 deletions.
diff --git 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<RSS3> {
     if (rss3) {
         return rss3;
     } else {

diff --git 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 = <string>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
@@ -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 = <string>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);
     }