From ac2b8b9e716d708c48ed382545035d4804068be0 Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Mon, 6 Mar 2017 15:28:21 -0800
Subject: [PATCH] RCFilters UI: Unify the loader animation

Bug: T159766
Change-Id: Ifda7510efa4e16422b5988c37c2e54aa08b52b71
---
 includes/specials/SpecialRecentchanges.php    | 27 ++++++++++++-------
 .../mediawiki.rcfilters/mw.rcfilters.init.js  |  3 +++
 .../styles/mw.rcfilters.less                  |  8 +++---
 .../ui/mw.rcfilters.ui.FilterWrapperWidget.js |  1 -
 .../ui/mw.rcfilters.ui.FormWrapperWidget.js   |  3 +--
 5 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/includes/specials/SpecialRecentchanges.php b/includes/specials/SpecialRecentchanges.php
index cdad926d2f..eb299078e1 100644
--- a/includes/specials/SpecialRecentchanges.php
+++ b/includes/specials/SpecialRecentchanges.php
@@ -456,24 +456,31 @@ class SpecialRecentChanges extends ChangesListSpecialPage {
 		$panel[] = $form;
 		$panelString = implode( "\n", $panel );
 
+		$rcoptions = Xml::fieldset(
+			$this->msg( 'recentchanges-legend' )->text(),
+			$panelString,
+			[ 'class' => 'rcoptions' ]
+		);
+
 		// Insert a placeholder for RCFilters
 		if ( $this->getUser()->getOption( 'rcenhancedfilters' ) ) {
+			$rcfilterContainer = Html::element(
+				'div',
+				[ 'class' => 'rcfilters-container' ]
+			);
+
+			// Wrap both with rcfilters-head
 			$this->getOutput()->addHTML(
-				Html::element(
+				Html::rawElement(
 					'div',
-					[ 'class' => 'rcfilters-container' ]
+					[ 'class' => 'rcfilters-head' ],
+					$rcfilterContainer . $rcoptions
 				)
 			);
+		} else {
+			$this->getOutput()->addHTML( $rcoptions );
 		}
 
-		$this->getOutput()->addHTML(
-			Xml::fieldset(
-				$this->msg( 'recentchanges-legend' )->text(),
-				$panelString,
-				[ 'class' => 'rcoptions' ]
-			)
-		);
-
 		$this->setBottomText( $opts );
 	}
 
diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
index 089b10609e..255d93b692 100644
--- a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
+++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
@@ -189,6 +189,9 @@
 			$( '.rcfilters-container' ).append( filtersWidget.$element );
 			$( 'body' ).append( $overlay );
 
+			// Set as ready
+			$( '.rcfilters-head' ).addClass( 'mw-rcfilters-ui-ready' );
+
 			window.addEventListener( 'popstate', function () {
 				controller.updateChangesList();
 			} );
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index 897a9e8191..d47346c14d 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -7,7 +7,10 @@
 		legend {
 			display: none;
 		}
+	}
 
+	.rcfilters-head {
+		min-height: 270px;
 		&:not( .mw-rcfilters-ui-ready ) {
 			/* @embed */
 			background-image: url( ../images/pending.gif );
@@ -22,11 +25,6 @@
 	.rcfilters-container {
 		min-height: 100px;
 		margin: 0;
-
-		&:not( .mw-rcfilters-ui-ready ) {
-			/* @embed */
-			background-image: url( ../images/pending.gif );
-		}
 	}
 }
 
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
index 886dc43a6c..de7ea74ff8 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -75,7 +75,6 @@
 		// Initialize
 		this.$element
 			.addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
-			.addClass( 'mw-rcfilters-ui-ready' )
 			.append( this.capsule.$element, this.textInput.$element );
 	};
 
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FormWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FormWrapperWidget.js
index 51311e1695..e914bbe7d9 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FormWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FormWrapperWidget.js
@@ -42,8 +42,7 @@
 		// Initialize
 		this.cleanUpFieldset();
 		this.$element
-			.addClass( 'mw-rcfilters-ui-FormWrapperWidget' )
-			.addClass( 'mw-rcfilters-ui-ready' );
+			.addClass( 'mw-rcfilters-ui-FormWrapperWidget' );
 	};
 
 	/* Initialization */
-- 
2.20.1