From dc9519393c8bf661915c979e7a6b9f68a172f628 Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Tue, 25 Jul 2017 12:50:39 -0700
Subject: [PATCH] RCFilters: Improve loading animation

Bug: T165286
Bug: T171671
Change-Id: I78e23f85c3ba06cb32355859d426e9c19d69499c
---
 .../mediawiki.rcfilters/mw.rcfilters.init.js  |  4 ---
 .../styles/mw.rcfilters.less                  | 26 ++++++++++++++-----
 ...w.rcfilters.ui.ChangesListWrapperWidget.js | 13 +++++-----
 .../ui/mw.rcfilters.ui.FormWrapperWidget.js   |  6 -----
 4 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
index 9da3f8c6fe..4263c5182f 100644
--- a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
+++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
@@ -37,10 +37,6 @@
 			$( '.rcfilters-container' ).append( filtersWidget.$element );
 			$( 'body' ).append( $overlay );
 
-			// Set as ready
-			$( '.rcfilters-head' ).addClass( 'mw-rcfilters-ui-ready' );
-			$( '.rcfilters-spinner' ).detach();
-
 			$( 'a.mw-helplink' ).attr(
 				'href',
 				'https://www.mediawiki.org/wiki/Special:MyLanguage/Help:New_filters_for_edit_review'
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index 305f3f97da..9f3b809120 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -15,6 +15,10 @@
 		&:not( .mw-rcfilters-ui-ready ) {
 			opacity: 0.5;
 			pointer-events: none;
+
+			.rcoptions {
+				display: none;
+			}
 		}
 	}
 
@@ -23,20 +27,30 @@
 		margin: 0;
 	}
 
-	.mw-changeslist-empty {
-		// Hide the 'empty' message when we load rcfilters
-		// since we replace it anyways with a specific
-		// message of our own
-		display: none;
+	.mw-changeslist {
+		&-empty {
+			// Hide the 'empty' message when we load rcfilters
+			// since we replace it anyways with a specific
+			// message of our own
+			display: none;
+		}
+
+		&:not( .mw-rcfilters-ui-ready ) {
+			opacity: 0.5;
+		}
 	}
 
 	.rcfilters-spinner {
 		margin: -2em auto 0;
 		width: 70px;
 		opacity: 0.8;
-		display: block;
+		display: none;
 		white-space: nowrap;
 
+		&:not( .mw-rcfilters-ui-ready ) {
+			display: block;
+		}
+
 		& .rcfilters-spinner-bounce,
 		&:before,
 		&:after {
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
index 0e9e843be1..37dda4d469 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
@@ -3,7 +3,6 @@
 	 * List of changes
 	 *
 	 * @extends OO.ui.Widget
-	 * @mixins OO.ui.mixin.PendingElement
 	 *
 	 * @constructor
 	 * @param {mw.rcfilters.dm.FiltersViewModel} filtersViewModel View model
@@ -23,8 +22,6 @@
 
 		// Parent
 		mw.rcfilters.ui.ChangesListWrapperWidget.parent.call( this, config );
-		// Mixin constructors
-		OO.ui.mixin.PendingElement.call( this, config );
 
 		this.filtersViewModel = filtersViewModel;
 		this.changesListViewModel = changesListViewModel;
@@ -51,7 +48,6 @@
 	/* Initialization */
 
 	OO.inheritClass( mw.rcfilters.ui.ChangesListWrapperWidget, OO.ui.Widget );
-	OO.mixinClass( mw.rcfilters.ui.ChangesListWrapperWidget, OO.ui.mixin.PendingElement );
 
 	/**
 	 * Respond to the highlight feature being toggled on and off
@@ -80,7 +76,9 @@
 	 * Respond to changes list model invalidate
 	 */
 	mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onModelInvalidate = function () {
-		this.pushPending();
+		$( '.rcfilters-head' ).removeClass( 'mw-rcfilters-ui-ready' );
+		$( '.rcfilters-spinner' ).removeClass( 'mw-rcfilters-ui-ready' );
+		this.$element.removeClass( 'mw-rcfilters-ui-ready' );
 	};
 
 	/**
@@ -139,7 +137,10 @@
 				mw.hook( 'wikipage.content' ).fire( this.$element );
 			}
 		}
-		this.popPending();
+
+		$( '.rcfilters-head' ).addClass( 'mw-rcfilters-ui-ready' );
+		$( '.rcfilters-spinner' ).addClass( 'mw-rcfilters-ui-ready' );
+		this.$element.addClass( 'mw-rcfilters-ui-ready' );
 	};
 
 	/**
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 0abaff20bb..04ccaf6d3e 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FormWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FormWrapperWidget.js
@@ -19,8 +19,6 @@
 		mw.rcfilters.ui.FormWrapperWidget.parent.call( this, $.extend( {}, config, {
 			$element: $formRoot
 		} ) );
-		// Mixin constructors
-		OO.ui.mixin.PendingElement.call( this, config );
 
 		this.changeListModel = changeListModel;
 		this.filtersModel = filtersModel;
@@ -48,7 +46,6 @@
 	/* Initialization */
 
 	OO.inheritClass( mw.rcfilters.ui.FormWrapperWidget, OO.ui.Widget );
-	OO.mixinClass( mw.rcfilters.ui.FormWrapperWidget, OO.ui.mixin.PendingElement );
 
 	/**
 	 * Respond to link click
@@ -89,7 +86,6 @@
 	 * Respond to model invalidate
 	 */
 	mw.rcfilters.ui.FormWrapperWidget.prototype.onChangesModelInvalidate = function () {
-		this.pushPending();
 		this.$submitButton.prop( 'disabled', true );
 	};
 
@@ -113,8 +109,6 @@
 		}
 
 		this.cleanUpFieldset();
-
-		this.popPending();
 	};
 
 	/**
-- 
2.20.1