AWS S3 Signed URLs in Table

💬 App Building
,
1

I have S3 keys that point to image files I want to use as avatar images. The bucket is of course protected, so I need signed URLs.

Now I want to display the Avatar images in a table.

So I pre-process the list of profiles like this

await Promise.all(validProfiles.map(async profile => {
  const s3Key = profile.documents.profilePicture.split('/').pop();
  const presignedURL = await picture_signedURL.trigger({
    additionalScope: {
      s3KeyName: s3Key,
    },
  })
  profile.documents.profilePictureSignedURL = presignedURL.signedUrl
  return profile;
}));

This of course takes quite some time for 300+ entries. Reducing entries is not an option.

So I want to use eventually resolving promises to the s3 signed URL, to not block the initial table rendering. How can I achieve this?

I tried just adding a promise into the data structure for the table but got some error like

'Window': # < Promise > could not be cloned

Also just putting picture_signedURL.trigger() into the table cell directly was not possible, because trigger() was not availble there.

Im out of ideas. How can I get this done? I want the table to render with the basic data and after that to populate the avatar images with results from async signedURL calls.

3

@perelin,
Let me make sure I understand your request. You would like your table to render the other columns while waiting for the avatars. You could, I believe, in the mapped value of the avatar column, refer to a separate variable that you have defined as an empty array. This array could then hold all the presignedURL avatars when retrieved. When the array populates, your images will appear. Of course, this may look strange to the enduser, who is looking at a table that has an empty column at first.

Another option might be to retrieve your presignedURLs ahead of time or in a chron job and store it and refer to this hard-coded data in your column.

Let me know if you think either of these work for you.