diff --git a/packages/block-editor/src/components/media-upload-progress/index.native.js b/packages/block-editor/src/components/media-upload-progress/index.native.js
index cb5a25d0bb8669..30977f8c6acf4e 100644
--- a/packages/block-editor/src/components/media-upload-progress/index.native.js
+++ b/packages/block-editor/src/components/media-upload-progress/index.native.js
@@ -187,16 +187,19 @@ export class MediaUploadProgress extends Component {
this.props.containerStyle,
] }
pointerEvents="box-none"
+ testID="progress-container"
>
-
- { showSpinner && (
-
- ) }
-
+ { ! this.props.hideProgressBar && (
+
+ { showSpinner && (
+
+ ) }
+
+ ) }
{ renderContent( {
isUploadPaused:
uploadState === MEDIA_UPLOAD_STATE_PAUSED &&
diff --git a/packages/block-editor/src/components/media-upload-progress/test/index.native.js b/packages/block-editor/src/components/media-upload-progress/test/index.native.js
index e5a6b460d94ef5..af062b62a17e39 100644
--- a/packages/block-editor/src/components/media-upload-progress/test/index.native.js
+++ b/packages/block-editor/src/components/media-upload-progress/test/index.native.js
@@ -217,4 +217,32 @@ describe( 'MediaUploadProgress component', () => {
expect( onMediaUploadStateReset ).toHaveBeenCalledTimes( 1 );
expect( onMediaUploadStateReset ).toHaveBeenCalledWith( payloadReset );
} );
+
+ it( 'does not display the spinner when hideProgressBar is true', () => {
+ const renderContentMock = jest.fn();
+ const progress = 0.1;
+ const payload = {
+ state: MEDIA_UPLOAD_STATE_UPLOADING,
+ mediaId: MEDIA_ID,
+ progress,
+ };
+
+ const wrapper = render(
+
+ );
+
+ sendMediaUpload( payload );
+
+ expect( wrapper.queryByTestId( 'spinner' ) ).toBeNull();
+ expect( renderContentMock ).toHaveBeenCalledWith(
+ expect.objectContaining( {
+ isUploadInProgress: true,
+ isUploadFailed: false,
+ } )
+ );
+ } );
} );
diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js
index 7ca9ecb63ea2a5..c2c3dd67e880e9 100644
--- a/packages/block-library/src/gallery/test/index.native.js
+++ b/packages/block-library/src/gallery/test/index.native.js
@@ -202,13 +202,17 @@ describe( 'Gallery block', () => {
await notifyUploadingState( media[ 0 ] );
await notifyUploadingState( media[ 1 ] );
- // Check that images are showing a loading state
+ // Check that images do not display the progress bar
expect(
- within( getGalleryItem( galleryBlock, 1 ) ).getByTestId( 'spinner' )
- ).toBeVisible();
+ within( getGalleryItem( galleryBlock, 1 ) ).queryByTestId(
+ 'spinner'
+ )
+ ).toBeNull();
expect(
- within( getGalleryItem( galleryBlock, 2 ) ).getByTestId( 'spinner' )
- ).toBeVisible();
+ within( getGalleryItem( galleryBlock, 2 ) ).queryByTestId(
+ 'spinner'
+ )
+ ).toBeNull();
// Notify that the media items upload succeeded
await notifySucceedState( media[ 0 ] );
@@ -295,11 +299,11 @@ describe( 'Gallery block', () => {
expect( galleryItem1 ).toBeVisible();
expect( galleryItem2 ).toBeVisible();
- // Check that images are showing a loading state
+ // Check that images do not display the progress bar
await notifyUploadingState( media[ 0 ] );
await notifyUploadingState( media[ 1 ] );
- expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible();
- expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible();
+ expect( within( galleryItem1 ).queryByTestId( 'spinner' ) ).toBeNull();
+ expect( within( galleryItem2 ).queryByTestId( 'spinner' ) ).toBeNull();
// Notify that the media items upload succeeded
await notifySucceedState( media[ 0 ] );
@@ -333,11 +337,11 @@ describe( 'Gallery block', () => {
expect( galleryItem1 ).toBeVisible();
expect( galleryItem2 ).toBeVisible();
- // Check that images are showing a loading state
+ // Check that images do not display the progress bar
await notifyUploadingState( media[ 0 ] );
await notifyUploadingState( media[ 1 ] );
- expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible();
- expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible();
+ expect( within( galleryItem1 ).queryByTestId( 'spinner' ) ).toBeNull();
+ expect( within( galleryItem2 ).queryByTestId( 'spinner' ) ).toBeNull();
// Notify that the media items uploads failed
await notifyFailedState( media[ 0 ] );
@@ -385,9 +389,9 @@ describe( 'Gallery block', () => {
const galleryItem = getGalleryItem( galleryBlock, 1 );
expect( galleryItem ).toBeVisible();
- // Check image is showing a loading state
+ // Check that the image does not display the progress bar
await notifyUploadingState( media[ 0 ] );
- expect( within( galleryItem ).getByTestId( 'spinner' ) ).toBeVisible();
+ expect( within( galleryItem ).queryByTestId( 'spinner' ) ).toBeNull();
// Notify that the media item upload succeeded
await notifySucceedState( media[ 0 ] );
@@ -443,11 +447,11 @@ describe( 'Gallery block', () => {
expect( galleryItem1 ).toBeVisible();
expect( galleryItem2 ).toBeVisible();
- // Check that images are showing a loading state
+ // Check that images do not display the progress bar
await notifyUploadingState( freePhotoMedia[ 0 ] );
await notifyUploadingState( freePhotoMedia[ 1 ] );
- expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible();
- expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible();
+ expect( within( galleryItem1 ).queryByTestId( 'spinner' ) ).toBeNull();
+ expect( within( galleryItem2 ).queryByTestId( 'spinner' ) ).toBeNull();
// Notify that the media items upload succeeded
await notifySucceedState( freePhotoMedia[ 0 ] );
@@ -481,22 +485,26 @@ describe( 'Gallery block', () => {
expect( galleryItem1 ).toBeVisible();
expect( galleryItem2 ).toBeVisible();
- // Check that images are showing a loading state
+ // Check that images do not display the progress bar
await notifyUploadingState( media[ 0 ] );
await notifyUploadingState( media[ 1 ] );
- expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible();
- expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible();
+ expect( within( galleryItem1 ).queryByTestId( 'spinner' ) ).toBeNull();
+ expect( within( galleryItem2 ).queryByTestId( 'spinner' ) ).toBeNull();
// Cancel uploads
fireEvent.press( galleryItem1 );
- fireEvent.press( within( galleryItem1 ).getByTestId( 'spinner' ) );
+ fireEvent.press(
+ within( galleryItem1 ).getByTestId( 'progress-container' )
+ );
expect( requestImageUploadCancelDialog ).toHaveBeenCalledWith(
media[ 0 ].localId
);
await notifyResetState( media[ 0 ] );
fireEvent.press( galleryItem2 );
- fireEvent.press( within( galleryItem2 ).getByTestId( 'spinner' ) );
+ fireEvent.press(
+ within( galleryItem2 ).getByTestId( 'progress-container' )
+ );
expect( requestImageUploadCancelDialog ).toHaveBeenCalledWith(
media[ 1 ].localId
);
@@ -581,11 +589,11 @@ describe( 'Gallery block', () => {
expect( galleryItem1 ).toBeVisible();
expect( galleryItem2 ).toBeVisible();
- // Check that images are showing a loading state
+ // Check that images do not diplay the progress bar
await notifyUploadingState( otherAppsMedia[ 0 ] );
await notifyUploadingState( otherAppsMedia[ 1 ] );
- expect( within( galleryItem1 ).getByTestId( 'spinner' ) ).toBeVisible();
- expect( within( galleryItem2 ).getByTestId( 'spinner' ) ).toBeVisible();
+ expect( within( galleryItem1 ).queryByTestId( 'spinner' ) ).toBeNull();
+ expect( within( galleryItem2 ).queryByTestId( 'spinner' ) ).toBeNull();
// Notify that the media items upload succeeded
await notifySucceedState( otherAppsMedia[ 0 ] );
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 604fb8a7ce52b2..f4c9f001c23821 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -815,6 +815,7 @@ export class ImageEdit extends Component {
enablePausedUploads
coverUrl={ url }
mediaId={ id }
+ hideProgressBar={ true }
onUpdateMediaProgress={ this.updateMediaProgress }
onFinishMediaUploadWithSuccess={
this.finishMediaUploadWithSuccess
diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js
index 0b9588eb3ac8ac..c637aa48617414 100644
--- a/packages/components/src/mobile/image/index.native.js
+++ b/packages/components/src/mobile/image/index.native.js
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
-import { Animated, Image as RNImage, Text, View } from 'react-native';
+import { Image as RNImage, Text, View } from 'react-native';
import FastImage from 'react-native-fast-image';
/**
@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
import { Icon } from '@wordpress/components';
import { image, offline } from '@wordpress/icons';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useEffect, useState, useRef, Platform } from '@wordpress/element';
+import { useEffect, useState, Platform } from '@wordpress/element';
/**
* Internal dependencies
@@ -218,19 +218,8 @@ const ImageComponent = ( {
focalPoint && styles.focalPointContainer,
];
- const opacityValue = useRef( new Animated.Value( 1 ) ).current;
-
- useEffect( () => {
- Animated.timing( opacityValue, {
- toValue: isUploadInProgress ? 0.3 : 1,
- duration: 100,
- useNativeDriver: true,
- } ).start();
- }, [ isUploadInProgress, opacityValue ] );
-
const imageStyles = [
{
- opacity: opacityValue,
height: containerSize?.height,
},
! resizeMode && {
@@ -319,9 +308,8 @@ const ImageComponent = ( {
{ Platform.isAndroid && (
<>
{ networkImageLoaded && networkURL && (
-
) }
{ ! networkImageLoaded && ! networkURL && (
-
-