RCFilters: Add loading animation

Change-Id: I09d39a387eb1ed2fe4c1292f0a255d180035baa0

diff --git a/includes/specials/SpecialRecentchanges.php b/includes/specials/SpecialRecentchanges.php
index eb6d939..a2e643b 100644 (file)
--- 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 2a6562d..5406480 100644 (file)
--- 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 (file)
index 0000000..1194eed
Binary files /dev/null and b/resources/src/mediawiki.rcfilters/images/pending.gif differ

diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
index 33e9f57..6cfeb1a 100644 (file)
--- 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 8423363..e2775f9 100644 (file)
--- 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 02ddb54..cad3dce 100644 (file)
--- 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 2513b07..d089086 100644 (file)
--- 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 */