VideoPress: use "Processing" thumbnail placeholder while a new thumbn…

…ail is being saved (#39631) * Export the thumb update status on the edit details hook * Use poster updating status to set video thumb as processing * Changelog --------- Co-authored-by: Douglas <[email protected]>
Automattic · Oct 7, 2024 · dd2077a · dd2077a
1 parent 3f185ff
commit dd2077a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/...s/packages/videopress/changelog/update-videopress-update-thumb-placeholder-while-updating b/...s/packages/videopress/changelog/update-videopress-update-thumb-placeholder-while-updating
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+VideoPress: fix thumbnail update bug that showed the old thumbnail for a couple seconds on the details page.
diff --git a/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx b/projects/packages/videopress/src/client/admin/components/edit-video-details/index.tsx
@@ -223,6 +223,7 @@ const EditVideoDetails = () => {
 		selectPosterImageFromLibrary,
 		posterImageSource,
 		libraryAttachment,
+		isUpdatingPoster,
 	} = useEditDetails();
 
 	const { canPerformAction } = usePermission();
@@ -312,7 +313,7 @@ const EditVideoDetails = () => {
 							<VideoThumbnail
 								thumbnail={ thumbnail }
 								loading={ isFetchingData }
-								processing={ processing }
+								processing={ processing || isUpdatingPoster }
 								deleting={ isDeleting }
 								updating={ updating }
 								duration={ duration }

diff --git a/...ts/packages/videopress/src/client/admin/components/edit-video-details/use-edit-details.ts b/...ts/packages/videopress/src/client/admin/components/edit-video-details/use-edit-details.ts
@@ -120,6 +120,7 @@ export default () => {
 		processing,
 		isDeleting,
 		updateVideoPrivacy,
+		isUpdatingPoster,
 	} = useVideo( Number( videoId ), true );
 
 	const { playbackToken, isFetchingPlaybackToken } = usePlaybackToken( video );
@@ -331,5 +332,6 @@ export default () => {
 		selectedTime,
 		...metaEditData,
 		...posterEditData,
+		isUpdatingPoster,
 	};
 };