Image action/edit buttons are disabled/grayed when uploading large images

[esseb]

Describe the bug
Image action/edit buttons are disabled/grayed when uploading large images (more than 500kB), no matter how long I wait. The action/edit buttons appear when reloading Sanity Studio with F5.

To Reproduce
Steps to reproduce the behavior:

1. Create a new document or edit an existing document with an image field
2. Upload an image that is more than 500kB
   • Preferable closer to 2.5MB when first testing since the exact size the error starts to occur is a bit fluid
   • You can use the PNG image from this zip file
   • If you try to reupload the exact same image the bug is not reproducible, I guess Sanity Studio detects the same image has already been uploaded and skips some image processing work so it finishes in less than 5 seconds
3. Wait 5 seconds
   • See the "Additional context" below for why I specify to wait 5 seconds
4. Look at the image action/edit buttons in the top right corner of the image field

Expected behavior
The image edit buttons should appear and not be disabled.

Actual behavior
The image preview appears but the image action/edit buttons are still disabled/grayed out even after waiting 5+ seconds.

When this bug occurs I see this error in the devtools console:

chunk-5BU2CV2I.js?v=c7e887fc:110133 Final error after retries, asset not found in documentPreviewStore: Error: No asset found in documentPreviewStore with id: image-a206369e57fa30dbcbab082679f65d4747d43f7a-1732x1210-png
    at chunk-5BU2CV2I.js?v=c7e887fc:110126:15
    at chunk-5BU2CV2I.js?v=c7e887fc:33266:17
    at OperatorSubscriber2._this._next (chunk-5BU2CV2I.js?v=c7e887fc:30264:9)
    at Subscriber2.next (chunk-5BU2CV2I.js?v=c7e887fc:29967:12)
    at chunk-5BU2CV2I.js?v=c7e887fc:33267:27
    at OperatorSubscriber2._this._next (chunk-5BU2CV2I.js?v=c7e887fc:30264:9)
    at Subscriber2.next (chunk-5BU2CV2I.js?v=c7e887fc:29967:12)
    at Observable2._subscribe (chunk-5BU2CV2I.js?v=c7e887fc:31450:18)
    at Observable2._trySubscribe (chunk-5BU2CV2I.js?v=c7e887fc:30165:19)
    at chunk-5BU2CV2I.js?v=c7e887fc:30159:115

Screenshots
A screenshot of the image edit buttons when this bug occurs:

A screenshot of the image edit buttons when this bug does not occur (they appear when reloading Sanity Studio with F5):

Which versions of Sanity are you using?

@sanity/cli (global)          3.64.2 (latest: 3.64.3)
@sanity/cli                   3.60.0 (latest: 3.64.3)
@sanity/color-input            3.1.2 (latest: 4.0.1)
@sanity/components            2.14.0 (up to date)
@sanity/eslint-config-studio   4.0.0 (up to date)
@sanity/image-url              1.1.0 (up to date)
@sanity/locale-nb-no          1.1.15 (up to date)
@sanity/production-preview    2.35.3 (up to date)
@sanity/rich-date-input        3.0.4 (up to date)
@sanity/ui                    2.8.24 (up to date)
@sanity/vision                3.64.2 (latest: 3.64.3)
sanity                        3.64.2 (latest: 3.64.3)

What operating system are you using?
macOS Sonoma 14.6.1

Which versions of Node.js / npm are you running?

10.5.2
v20.13.1

Additional context
The image action/edit buttons appear after reloading the page with f5.

The bug seems to occur when images are about 500kB or larger, but this is not entirely consistent, I've seen it happen for images around 400kB also. The error was first reported for large PNG images with transparency around 2.5MB in size, but I can reproduce the bug with JPG images also if the file size is 500kB or larger.

The error I see in the devtools console is from here:

sanity/packages/sanity/src/core/form/studio/inputs/client-adapters/assets.ts

Lines 100 to 106 in 7888272

	/**
	* In some cases when uploading large media file we are getting an stale `null` response from content lake when fetching the reference that was just uploaded,
	* making the UI not to react as it should.
	* This retry logic is added to handle the case where the asset is not found in the initial fetch to the documentPreviewStore but it will eventually be found,
	* because the asset has been just added.
	* It has the downside that if this is being used to check if an asset exists, it will retry 5 times before returning null.
	*/

This indicates there is an attempt to work around this issue with 5 retries and a 1 second timeout, which does not help in my case.

Security issue?
No.

[esseb]

I retested this issue again today to see if this could be the cause of another issue I'm seeing when publishing. I could still reproduce the issue today but only every 8th or large image I tried to upload. I was able to reproduce it 4 times. Same configuration as when I originally reported this.

[rshelnutt]

Experiencing this issue as well - hit or miss on when it happens, but it is consistent. File size may not be related - this occurred with a 16kb image.

@sanity/cli              3.65.1
@sanity/client           6.21.2
@sanity/color-input       3.1.1
@sanity/dashboard         4.1.0
@sanity/image-url         1.0.2
@sanity/react-loader     1.10.4
@sanity/ui               2.8.19
@sanity/vision           3.52.0
@sanity/visual-editing    2.1.6
@sanity/webhook           4.0.4

[bjoerge]

This was fixed by #8076 which has been out since v3.68.0. Please upgrade and let us know if you're still having issues. Thanks for reporting!

[github-actions]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.