App: [HOLD for payment 2022-06-16] [HOLD for payment 2022-06-15] [$500] Uploading an image causes the thumbnail to resize 3 times

We’ve updated the API in the backend and it has just been merged. The code should be live either tomorrow or Monday.

@chiragsalian Are you good with this https://github.com/Expensify/App/issues/8590#issuecomment-1108978375?

Then let’s put this issue on hold until API is ready. Thanks!

This is still pretty janky, can we make it so:

1. The thumbnail that is shown immediately has the same dimensions as the image that’s shown at the end of the flow
2. The thumbnail that is shown immediately doesn’t have a spinner on top of it
3. The “blank thumbnail” is never shown

cc @JmillsExpensify

@chiragsalian Status on PR: Just a few minor changes pending on PR on @chiragsalian final review. Mostly my job is done, here. Moving forward If there is anything major that needs C+ attention, feel free to un-assign me and add a new C+ here, thanks!

cc: @michaelhaxhiu

@allroundexperts The code for having the dimensions as data attributes is now on production 🙂

a simple and effective fix would be to save the dimensions in the API call. That’ll work well for all the users.

You mean to return the dimensions from the API right? If so that makes sense to me

These were discussed in the beginning as well but given how code is structured it won’t be easy to do these. Also, this would only work for the uploader of the image. The other users in the chat would still have to see a loader.

On Tue, 24 May 2022 at 10:46 PM, Carlos Alvarez @.***> wrote:

The thumbnails from step 1 and 3 are the same and i was wondering if the loading gif is a bad user experience or not

I think the video already shows an improvement from what we already have, but I do think showing the spinner is not ideal. Do either of these two options seem feasible and worth exploring?

• One idea would be to display preview, upload the image, once that’s done we create an invisible image element, and once it finishes loading (img.onload) we can swap the preview with the invisible image
• Another is to display the preview, upload the image, once that’s done we create an image element that’s underneath the preview, and once it finishes loading (img.onload) we can remove the preview to reveal the image underneath

— Reply to this email directly, view it on GitHub https://github.com/Expensify/App/issues/8590#issuecomment-1136256236, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHFJUUCISGJIS3JC7SVP4CDVLUIW3ANCNFSM5TCA4OKQ . You are receiving this because you were mentioned.Message ID: @.***>

Already on it.

@michaelhaxhiu Applied.

@Santhosh-Sellavel I get it now. Will update proposal.

Cool, my PR hasn’t been reviewed yet and a deploy was done for today so i imagine my PR should be deployed to staging earliest by tomorrow morning. Will keep you updated.

@chiragsalian updating the title as I think @Santhosh-Sellavel is correct !

a simple and effective fix would be to save the dimensions in the API call. That’ll work well for all the users.

You mean to return the dimensions from the API right? If so that makes sense to me

That is what I mean. But I can’t edit your API responses. Someone from the internal team will have to do that, unless I missed something. @cead22 @Santhosh-Sellavel

Sorry for responding so late, I have exams going on. Please continue with other proposals.

Sorry, if you go to the comment above, I say “can we make it so:…” and list those points. I updated the previous comment to make it clearer