make the home screen elements load more quickly

src/views/HomeView.vue

@@ -268,7 +268,6 @@
 </template>
 
 <script lang="ts">
-import * as R from "ramda";
 import { UAParser } from "ua-parser-js";
 import { IIdentifier } from "@veramo/core";
 import { Component, Vue } from "vue-facing-decorator";
@@ -306,8 +305,8 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
     displayName: string;
     known: boolean;
   };
-  image: string;
-  recipientProjectName: string | undefined;
+  image?: string;
+  recipientProjectName?: string;
   receiver: {
     displayName: string;
     known: boolean;
@@ -488,70 +487,63 @@ export default class HomeView extends Vue {
           endOfResults = false;
           // include the descriptions of the giver and receiver
           const identity = await this.getIdentity(this.activeDid);
-          const newFeedData: Array<Promise<GiveRecordWithContactInfo>> =
-            results.data.map(async (record: GiveSummaryRecord) => {
-              // similar code is in endorser-mobile utility.ts
-              // claim.claim happen for some claims wrapped in a Verifiable Credential
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              const claim = (record.fullClaim as any).claim || record.fullClaim;
-              // agent.did is for legacy data, before March 2023
-              const giverDid =
-                claim.agent?.identifier || (claim.agent as any)?.did; // eslint-disable-line @typescript-eslint/no-explicit-any
-              // recipient.did is for legacy data, before March 2023
-              const recipientDid =
-                claim.recipient?.identifier || (claim.recipient as any)?.did; // eslint-disable-line @typescript-eslint/no-explicit-any
-              const plan = await getPlanFromCache(
-                record.fulfillsPlanHandleId,
-                identity,
-                this.axios,
-                this.apiServer,
-              );
-
-              // check if the record should be filtered out
-              let anyMatch = false;
-              if (
-                this.isFeedFilteredByVisible &&
-                containsNonHiddenDid(record)
-              ) {
-                // has a visible DID so it's a keeper
-                anyMatch = true;
-              }
-              if (!anyMatch && this.isFeedFilteredByNearby) {
-                // check if the associated project has a location inside user's search box
-                if (record.fulfillsPlanHandleId) {
-                  if (plan?.locLat && plan?.locLon) {
-                    if (this.latLongInAnySearchBox(plan.locLat, plan.locLon)) {
-                      anyMatch = true;
-                    }
+          for (const record: GiveSummaryRecord of results.data) {
+            // similar code is in endorser-mobile utility.ts
+            // claim.claim happen for some claims wrapped in a Verifiable Credential
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const claim = (record.fullClaim as any).claim || record.fullClaim;
+            // agent.did is for legacy data, before March 2023
+            const giverDid =
+              claim.agent?.identifier || (claim.agent as any)?.did; // eslint-disable-line @typescript-eslint/no-explicit-any
+            // recipient.did is for legacy data, before March 2023
+            const recipientDid =
+              claim.recipient?.identifier || (claim.recipient as any)?.did; // eslint-disable-line @typescript-eslint/no-explicit-any
+            const plan = await getPlanFromCache(
+              record.fulfillsPlanHandleId,
+              identity,
+              this.axios,
+              this.apiServer,
+            );
+
+            // check if the record should be filtered out
+            let anyMatch = false;
+            if (this.isFeedFilteredByVisible && containsNonHiddenDid(record)) {
+              // has a visible DID so it's a keeper
+              anyMatch = true;
+            }
+            if (!anyMatch && this.isFeedFilteredByNearby) {
+              // check if the associated project has a location inside user's search box
+              if (record.fulfillsPlanHandleId) {
+                if (plan?.locLat && plan?.locLon) {
+                  if (this.latLongInAnySearchBox(plan.locLat, plan.locLon)) {
+                    anyMatch = true;
                   }
                 }
               }
-              if (this.isAnyFeedFilterOn && !anyMatch) {
-                return null;
-              }
-
-              return {
-                ...record,
-                giver: didInfoForContact(
-                  giverDid,
-                  this.activeDid,
-                  contactForDid(giverDid, this.allContacts),
-                  this.allMyDids,
-                ),
-                image: claim.image,
-                recipientProjectName: plan?.name,
-                receiver: didInfoForContact(
-                  recipientDid,
-                  this.activeDid,
-                  contactForDid(recipientDid, this.allContacts),
-                  this.allMyDids,
-                ),
-              };
-            });
-          const allNewFeedData: GiveRecordWithContactInfo[] =
-            await Promise.all(newFeedData);
-          const filteredFeedData = allNewFeedData.filter(R.isNotNil);
-          this.feedData = this.feedData.concat(filteredFeedData);
+            }
+            if (this.isAnyFeedFilterOn && !anyMatch) {
+              continue;
+            }
+
+            const newRecord: GiveRecordWithContactInfo = {
+              ...record,
+              giver: didInfoForContact(
+                giverDid,
+                this.activeDid,
+                contactForDid(giverDid, this.allContacts),
+                this.allMyDids,
+              ),
+              image: claim.image,
+              recipientProjectName: plan?.name as string,
+              receiver: didInfoForContact(
+                recipientDid,
+                this.activeDid,
+                contactForDid(recipientDid, this.allContacts),
+                this.allMyDids,
+              ),
+            };
+            this.feedData.push(newRecord);
+          }
           this.feedPreviousOldestId =
             results.data[results.data.length - 1].jwtId;
           // The following update is only done on the first load.