From 1a4692f54d1863386549dfc0a3ffd7a40076c1cc Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Mon, 12 Feb 2024 23:00:04 +0000
Subject: [PATCH] Media: Update progress spinner position on small screens.

Move the media library progress spinner to overlay the filter controls while active. Improves design and prevents unpredictable layout.

Props afercia, kushang78, joedolson, karmatosed.
Fixes #33049.

git-svn-id: https://develop.svn.wordpress.org/trunk@57605 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/js/media/views/attachments/browser.js |  3 +++
 src/js/media/views/toolbar.js             |  5 +++-
 src/wp-includes/css/media-views.css       | 28 +++++++++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/js/media/views/attachments/browser.js b/src/js/media/views/attachments/browser.js
index 00852a3999..f0bdc326da 100644
--- a/src/js/media/views/attachments/browser.js
+++ b/src/js/media/views/attachments/browser.js
@@ -423,6 +423,7 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 
 		if ( ! this.collection.length ) {
 			this.toolbar.get( 'spinner' ).show();
+			this.toolbar.$( '.media-bg-overlay' ).show();
 			this.dfd = this.collection.more().done( function() {
 				if ( ! view.collection.length ) {
 					noItemsView.$el.removeClass( 'hidden' );
@@ -430,10 +431,12 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 					noItemsView.$el.addClass( 'hidden' );
 				}
 				view.toolbar.get( 'spinner' ).hide();
+				view.toolbar.$( '.media-bg-overlay' ).hide();
 			} );
 		} else {
 			noItemsView.$el.addClass( 'hidden' );
 			view.toolbar.get( 'spinner' ).hide();
+			this.toolbar.$( '.media-bg-overlay' ).hide();
 		}
 	},
 
diff --git a/src/js/media/views/toolbar.js b/src/js/media/views/toolbar.js
index 1beb428fe6..ed40dcdfda 100644
--- a/src/js/media/views/toolbar.js
+++ b/src/js/media/views/toolbar.js
@@ -28,10 +28,12 @@ Toolbar = View.extend(/** @lends wp.media.view.Toolbar.prototype */{
 		// The toolbar is composed of two `PriorityList` views.
 		this.primary   = new wp.media.view.PriorityList();
 		this.secondary = new wp.media.view.PriorityList();
+		this.tertiary  = new wp.media.view.PriorityList();
 		this.primary.$el.addClass('media-toolbar-primary search-form');
 		this.secondary.$el.addClass('media-toolbar-secondary');
+		this.tertiary.$el.addClass('media-bg-overlay');
 
-		this.views.set([ this.secondary, this.primary ]);
+		this.views.set([ this.secondary, this.primary, this.tertiary ]);
 
 		if ( this.options.items ) {
 			this.set( this.options.items, { silent: true });
@@ -122,6 +124,7 @@ Toolbar = View.extend(/** @lends wp.media.view.Toolbar.prototype */{
 		delete this._views[ id ];
 		this.primary.unset( id, options );
 		this.secondary.unset( id, options );
+		this.tertiary.unset( id, options );
 
 		if ( ! options || ! options.silent ) {
 			this.refresh();
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index ab392ef890..de1ae1bdae 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -2814,6 +2814,34 @@
 		font-size: 14px;
 		line-height: 2.71428571;
 	}
+
+	.media-frame .wp-filter .media-toolbar-secondary {
+		position: unset;
+	}
+	
+	.media-frame .media-toolbar-secondary .spinner {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		margin: auto;
+		left: 0;
+		right: 0;
+		z-index: 9;
+	}
+	
+	.media-bg-overlay {
+		content: '';
+		background: #ffffff;
+		width: 100%;
+		height: 100%;
+		display: hidden;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		opacity: 0.6;
+	}
 }
 
 /* Responsive on portrait and landscape */