RCFilters UI: Unify the loader animation

Bug: T159766
Change-Id: Ifda7510efa4e16422b5988c37c2e54aa08b52b71

diff --git a/includes/specials/SpecialRecentchanges.php b/includes/specials/SpecialRecentchanges.php
index cdad926..eb29907 100644 (file)
--- 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 089b106..255d93b 100644 (file)
--- 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 897a9e8..d47346c 100644 (file)
--- 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 886dc43..de7ea74 100644 (file)
--- 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 51311e1..e914bbe 100644 (file)
--- 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 */