Hey guys, I need some suggestions. I have a UI that shows thumbnails of users uploaded images and a button to upload a new image. When an image is uploaded to S3 (directly from client), it triggers a lambda function that generates thumbnail for the image.
I need to display the thumbnail in the UI as soon as the upload completes but I only know when the first upload was completed and don’t know when the lambda function completed. How to go about this?
Should I check for the thumbnail image and if it doesn’t exist then return the original image?
how long does this take to complete and why do you need to show the thumbnail image?
Thanks for replying! The lambda function takes around 5-6 seconds to complete. I have a UI that shows all the uploaded images by the users (shown as thumbnails or small size image), so when a user uploads a new image I want to display the new image as well along with the rest of the uploaded images
Why not just immediately display the image the user uploaded that’s already cached on the client side?
e.g. create a spinner for 100ms, then display the cached data as the image. The next time the user comes back to the page the render will be done and can be displayed at that time. This is how to make great UX.
And you won’t even need to make another API call nor transfer extra data
Yeah that’s the existing workflow, currently I show the original uploaded image, but I want to change the source of image to the resized thumbnail image (which takes few seconds to generate)
What’s the business reason driving the change to the worse user experience?
The user experience is way better after the first upload, the user can upload pretty large files ~25Mb, so the subsequent loads will be many magnitude times faster with a resized thumbnail. It’s just the first time issue
right, but my suggestion was not to change how the first time upload experience is and leave that alone, then you’ll have the best of both worlds
Makes sense, thanks for the suggestion! 
:skin-tone-3:
