Gallery: images stuck in upload in progress state

[delowardev]

Description

If someone presses the 'Save' button while the gallery block is uploading images, images get stuck in the loading state.

Please check the attached video: https://share.vidyard.com/watch/zZ3dZUQVofCkPziqYa4kTg

Step-by-step reproduction instructions

1. Create a gallery block
2. Drop some images
3. Press the 'Save/Update' button while images are uploading.
4. Reload the browser window

Screenshots, screen recording, code snippet

Screenshot:

Environment info

• Gutenberg: 12.9.0
• WordPress: 5.9
• Browser: Chrome

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Mamaduka]

Related #16030.

[noisysocks]

This and the related issues have been a longstanding problem to do with using setAttributes( { image: null } ) as how we indicate that the image is uploading. We ought to use useState() and then only call setAttributes once when the image is uploaded.

[Mamaduka]

The image block uses state while image is blob.

gutenberg/packages/block-library/src/image/edit.js

Lines 170 to 173 in b47a77d

	if ( isBlobURL( media.url ) ) {
	setTemporaryURL( media.url );
	return;
	}