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 && ( - -