fix(core): add retry to image observer and loading state

[pedrobonamin]

Description

We have a racing condition in the BaseImageInput component, in some cases, specially with big images the fetch request to resolve the reference is happening before the reference exists. Making the image input to persist in a "loading" state which nothing indicates it.
Also, there was no retry option when the reference was not properly resolved.

With this changes, a retry option is added to the observeAssetDoc function, fixing this problem.
Also, a loading state was included in the image input.

How to reproduce this issue:

• Go to https://test-studio-git-next.sanity.build/test/structure/
• Open any document with an image input.
• Add a large image which is not in the client assets, see if it stales, if not, remove the image and try with another one.
• Retry previous step until you can see the issue.

Reproducing the issue in next

Screen.Recording.2024-05-17.at.11.20.41.mov

After fix

After the fix I was not able to reproduce this issue anymore.

Screen.Recording.2024-05-17.at.11.23.57.mov

What to review

Testing

Manual testing of the issue, couldn't reproduce it.

Notes for release

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 21, 2024 1:27pm
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 21, 2024 1:27pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 21, 2024 1:27pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		May 21, 2024 1:27pm

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated May 21, 2024 1:31 PM (UTC)

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	36s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	7s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	28s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	32s	11	7	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	14s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	35s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 16s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 6s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	7s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	20s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	15s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	30s	12	0	0

[bjoerge]

Great find. We should investigate why we're getting stale data when refetching as a response to an event received from a listener set up with visibility=query, but this is a nice workaround in the meantime.

Would be great if you could add a comment to the operator chain to make it easier to know if/when it can be removed.

[bjoerge]

Thanks @pedrobonamin!