From 658af7f47f5ce135e09bac6a304abd31aba4bc7e Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Tue, 28 Feb 2017 17:22:54 -0800
Subject: [PATCH] RCFilters: Add loading animation

Change-Id: I09d39a387eb1ed2fe4c1292f0a255d180035baa0
---
 includes/specials/SpecialRecentchanges.php    |  11 ++++++
 resources/Resources.php                       |   5 +++
 .../mediawiki.rcfilters/images/pending.gif    | Bin 0 -> 2032 bytes
 .../mediawiki.rcfilters/mw.rcfilters.init.js  |   4 +--
 .../styles/mw.rcfilters.less                  |  32 +++++++++++++++---
 .../ui/mw.rcfilters.ui.FilterWrapperWidget.js |   1 +
 .../ui/mw.rcfilters.ui.FormWrapperWidget.js   |   6 +++-
 7 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 resources/src/mediawiki.rcfilters/images/pending.gif

diff --git a/includes/specials/SpecialRecentchanges.php b/includes/specials/SpecialRecentchanges.php
index eb6d9394bd..a2e643bf6b 100644
--- a/includes/specials/SpecialRecentchanges.php
+++ b/includes/specials/SpecialRecentchanges.php
@@ -455,6 +455,17 @@ class SpecialRecentChanges extends ChangesListSpecialPage {
 		$panel[] = $form;
 		$panelString = implode( "\n", $panel );
 
+		// Insert a placeholder for RCFilters
+		if ( $this->getUser()->getOption( 'rcenhancedfilters' ) ) {
+			$this->getOutput()->addModuleStyles( 'mediawiki.rcfilters.filters.base.styles' );
+			$this->getOutput()->addHTML(
+				Html::element(
+					'div',
+					[ 'class' => 'rcfilters-container' ]
+				)
+			);
+		}
+
 		$this->getOutput()->addHTML(
 			Xml::fieldset(
 				$this->msg( 'recentchanges-legend' )->text(),
diff --git a/resources/Resources.php b/resources/Resources.php
index 2a6562dee3..5406480bed 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1751,6 +1751,11 @@ return [
 
 	/* MediaWiki Special pages */
 
+	'mediawiki.rcfilters.filters.base.styles' => [
+		'styles' => [
+			'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less',
+		],
+	],
 	'mediawiki.rcfilters.filters.dm' => [
 		'scripts' => [
 			'resources/src/mediawiki.rcfilters/mw.rcfilters.js',
diff --git a/resources/src/mediawiki.rcfilters/images/pending.gif b/resources/src/mediawiki.rcfilters/images/pending.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1194eed2934dadc2269e2269df9aeb67d176b2e8
GIT binary patch
literal 2032
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
A%K!iX

literal 0
HcmV?d00001

diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
index 33e9f57359..6cfeb1a72a 100644
--- a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
+++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
@@ -23,7 +23,7 @@
 
 			// eslint-disable-next-line no-new
 			new mw.rcfilters.ui.FormWrapperWidget(
-				changesListModel, $( '.rcoptions form' ) );
+				changesListModel, $( '.rcoptions' ) );
 
 			controller.initialize( {
 				registration: {
@@ -184,7 +184,7 @@
 				}
 			} );
 
-			$( '.rcoptions' ).before( filtersWidget.$element );
+			$( '.rcfilters-container' ).append( filtersWidget.$element );
 			$( 'body' ).append( $overlay );
 
 			// HACK: Remove old-style filter links for filters handled by the widget
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index 8423363ee4..e2775f92a1 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -1,9 +1,31 @@
 // Corrections for the standard special page
-.rcoptions {
-	border: 0;
-	border-bottom: 1px solid #a2a9b1;
+.client-js{
+	.rcoptions {
+		border: 0;
+		border-bottom: 1px solid #a2a9b1;
 
-	legend {
-		display: none;
+		legend {
+			display: none;
+		}
+
+		&:not( .mw-rcfilters-ui-ready ) {
+			/* @embed */
+			background-image: url( ../images/pending.gif );
+			margin: 0;
+
+			* {
+				visibility: hidden;
+			}
+		}
+	}
+
+	.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 02ddb549d0..cad3dce7c5 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -74,6 +74,7 @@
 		// 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 2513b075ea..d089086dda 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FormWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FormWrapperWidget.js
@@ -18,13 +18,17 @@
 		} ) );
 
 		this.model = model;
-		this.$submitButton = this.$element.find( 'input[type=submit]' );
+		this.$submitButton = this.$element.find( 'form input[type=submit]' );
 
 		// Events
 		this.model.connect( this, {
 			invalidate: 'onModelInvalidate',
 			update: 'onModelUpdate'
 		} );
+
+		this.$element
+			.addClass( 'mw-rcfilters-ui-FormWrapperWidget' )
+			.addClass( 'mw-rcfilters-ui-ready' );
 	};
 
 	/* Initialization */
-- 
2.20.1