Add loading bar while loading mmv module

When opening the media viewer, we immediately display a black frame,
as we wait for the dependencies etc to load.

Add a codex indeterminate progress bar to this phase as we wait, so
the user has feedback that something is happening.

Bug: T77230
Change-Id: Ibba98150ac2e8034fbfcd586309632704cf0b606

extension.json

@@ -207,6 +207,7 @@
 			"codexComponents": [
 				"CdxButton",
 				"CdxDialog",
+				"CdxProgressBar",
 				"CdxSelect",
 				"CdxTabs",
 				"CdxTextInput"
@@ -301,6 +302,7 @@
 				"mmv.head"
 			],
 			"messages": [
+				"multimediaviewer-loading",
 				"multimediaviewer-view-expanded",
 				"multimediaviewer-view-config",
 				"multimediaviewer-disable-info-title",

i18n/en.json

@@ -154,5 +154,6 @@
 	"multimediaviewer-enable-alert": "Media Viewer is now disabled",
 	"multimediaviewer-disable-info-title": "You have disabled Media Viewer",
 	"multimediaviewer-disable-info": "You can still view individual files with Media Viewer.",
-	"multimediaviewer-errorreport-privacywarning": "Details of the error are attached to the report, which will be publicly viewable. If you are not comfortable with that, you can edit the report below and remove all the data you don't want to share."
+	"multimediaviewer-errorreport-privacywarning": "Details of the error are attached to the report, which will be publicly viewable. If you are not comfortable with that, you can edit the report below and remove all the data you don't want to share.",
+	"multimediaviewer-loading": "Loading Media Viewer."
 }

i18n/qqq.json

@@ -167,5 +167,6 @@
 	"multimediaviewer-enable-alert": "Text shown in the enable panel to alert the user that the media viewer is currently disabled.",
 	"multimediaviewer-disable-info-title": "Used as title for {{msg-mw|Multimediaviewer-disable-info}}.",
 	"multimediaviewer-disable-info": "The title for this message is {{msg-mw|Multimediaviewer-disable-info-title}}.",
-	"multimediaviewer-errorreport-privacywarning": "A warning that is included in the Phabricator error report that's generated when the user clicks on the report link on an error page."
+	"multimediaviewer-errorreport-privacywarning": "A warning that is included in the Phabricator error report that's generated when the user clicks on the report link on an error page.",
+	"multimediaviewer-loading": "Label for indeterminate progress bar shown while the dialog is loading."
 }

resources/mmv.bootstrap/mmv.bootstrap.js

@@ -174,7 +174,11 @@ class MultimediaViewerBootstrap {
 					mw.notify( `Error loading MediaViewer: ${ message2 }` );
 					return $.Deferred().reject( message2 );
 				}
-			);
+			).always( () => {
+				if ( this.$loadBar ) {
+					this.$loadBar.remove();
+				}
+			} );
 	}
 
 	/**
@@ -214,7 +218,7 @@ class MultimediaViewerBootstrap {
 			this.$parsoidThumbs.each( ( i, thumb ) => this.processParsoidThumb( thumb ) );
 		} finally {
 			this.thumbsReadyDeferred.resolve();
-			// now that we have set up our real click handler we can we can remove the temporary
+			// now that we have set up our real click handler we can remove the temporary
 			// handler added in mmv.head.js which just replays clicks to the real handler
 			$( document ).off( 'click.mmv-head' );
 		}
@@ -685,6 +689,14 @@ class MultimediaViewerBootstrap {
 			this.$overlay = $( '<div>' )
 				// Dark overlay should stay dark in dark mode
 				.addClass( 'mw-mmv-overlay mw-no-invert' );
+
+			this.$loadBar = $( '<div>' )
+				.addClass( 'cdx-progress-bar' )
+				.attr( {
+					role: 'progressbar',
+					'aria-label': mw.msg( 'multimediaviewer-loading' )
+				} ).append( $( '<div>' ).addClass( 'cdx-progress-bar__bar' ) );
+			this.$overlay.append( this.$loadBar );
 		}
 
 		this.savedScrollTop = $( window ).scrollTop();

resources/mmv.bootstrap/mmv.bootstrap.less

@@ -8,6 +8,17 @@
 	bottom: 0;
 	z-index: 1000;
 	background-color: #000;
+	display: flex;
+	justify-items: center;
+	align-items: center;
+	align-content: center;
+	justify-content: center;
+
+	.cdx-progress-bar {
+		max-width: 80vw;
+		min-width: 20vw;
+		width: 20rem;
+	}
 }
 
 body.mw-mmv-lightbox-open {
@@ -18,7 +29,10 @@ body.mw-mmv-lightbox-open {
 		display: none;
 	}
 
-	> .mw-mmv-overlay,
+	> .mw-mmv-overlay {
+		display: flex;
+	}
+
 	> .mw-mmv-wrapper {
 		display: block;
 	}