RCFilters: Improve loading animation

Bug: T165286
Bug: T171671
Change-Id: I78e23f85c3ba06cb32355859d426e9c19d69499c

diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
index 9da3f8c..4263c51 100644 (file)
--- 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 305f3f9..9f3b809 100644 (file)
--- 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 0e9e843..37dda4d 100644 (file)
--- 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 0abaff2..04ccaf6 100644 (file)
--- 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();
        };
 
        /**