Merge "Make loading progress bar determinate"

modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.init.css

@@ -48,12 +48,33 @@
 	cursor: default;
 }
 
-/* Progress bar */
+/* Progress bar mimicking OOUI */
 
-.mw-viewPageTarget-loading {
-	width: 128px;
-	height: 15px;
-	float: right;
+.ve-activated #content {
+	position: relative;
+}
+
+.ve-init-mw-viewPageTarget-loading-overlay {
+	position: absolute;
+	left: 0;
+	right: 0;
+	z-index: 1;
+	margin-top: -0.5em;
+}
+
+.ve-init-mw-viewPageTarget-progress {
+	border: 1px solid #347bff;
+	background: #fff;
+	height: 0.75em;
+	border-radius: 2px;
+	overflow: hidden;
+	margin: 0 25%;
+}
+
+.ve-init-mw-viewPageTarget-progress-bar {
+	width: 0;
+	height: 0.75em;
+	background: #347bff;
 }
 
 /* Section edit links */
@@ -79,10 +100,3 @@
 	background-image: none !important;
 	display: inline !important;
 }
-
-/* Images */
-
-.mw-viewPageTarget-loading {
-	/* @embed */
-	background-image: url(images/loading-ltr.gif);
-}

modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.init.js

@@ -24,9 +24,36 @@
 
 	function showLoading() {
 		if ( !init.$loading ) {
-			init.$loading = $( '<div class="mw-viewPageTarget-loading"></div>' );
+			init.$loading = $(
+				'<div class="ve-init-mw-viewPageTarget-loading-overlay">' +
+					'<div class="ve-init-mw-viewPageTarget-progress">' +
+						'<div class="ve-init-mw-viewPageTarget-progress-bar"></div>' +
+					'</div>' +
+				'</div>'
+			);
+		}
+		var $window = $( window ),
+			$content = $( '#content' ),
+			scrollTop = $window.scrollTop(),
+			offsetTop = $content.offset().top,
+			windowHeight = $window.height();
+
+		if ( scrollTop > offsetTop ) {
+			init.$loading.css( 'top', ( scrollTop - offsetTop ) + ( windowHeight / 2 ) );
+		} else {
+			init.$loading.css( 'top', ( windowHeight - ( offsetTop - scrollTop ) ) / 2 );
+		}
+
+		$content.prepend( init.$loading );
+	}
+
+	function setLoadingProgress( target, duration ) {
+		var $bar = init.$loading.find( '.ve-init-mw-viewPageTarget-progress-bar' ).stop();
+		if ( duration ) {
+			$bar.animate( { width: target + '%' }, duration );
+		} else {
+			$bar.css( 'width', target + '%' );
 		}
-		$( '#firstHeading' ).prepend( init.$loading );
 	}
 
 	function hideLoading() {
@@ -41,7 +68,6 @@
 	 * @return {jQuery.Promise}
 	 */
 	function getTarget() {
-		showLoading();
 		if ( !targetPromise ) {
 			// The TargetLoader module is loaded in the bottom queue, so it should have been
 			// requested already but it might not have finished loading yet
@@ -99,13 +125,17 @@
 			} );
 
 		$( 'html' ).addClass( 've-activated ve-loading' );
+		showLoading();
+		setLoadingProgress( 70, 3000 );
 
 		targetPromise = targetPromise || getTarget();
 		targetPromise
 			.then( function ( target ) {
+				setLoadingProgress( 100, 1000 );
 				return target.activate( dataPromise );
 			} )
 			.then( function () {
+				setLoadingProgress( 0 );
 				ve.track( 'mwedit.ready' );
 			} )
 			.always( hideLoading );