mediawiki.special.watchlist: Fix render stampede after "Mark all pages visited"

Follow-up 9ea1142fad, f4d70ceedc, 73592aea1c.

The progress bar has a continuous animation that is rather CPU heavy.
While it is set to 'visibility hidden', this is merely a way to make the
contents of the element transparent. It is still interactable (e.g. if it
has hover or click handlers, they would trigger if hovering in that area)
and still rendered with full 60fps paint and layout.

Instead, detach and (re-)append the element as needed. Since the element
has an absolute position, it doesn't cause a content reflow when the element
is detached. This fact is already made use of considering the element is
inserted only after the submit button is clicked - without content reflow.

Change-Id: I06ef0d527044e5a6080febdb618eaffeb6ec85fa

diff --git a/resources/src/mediawiki.special/mediawiki.special.watchlist.js b/resources/src/mediawiki.special/mediawiki.special.watchlist.js
index 9ca98c0..7cc9b9b 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.watchlist.js
+++ b/resources/src/mediawiki.special/mediawiki.special.watchlist.js
@@ -16,17 +16,15 @@
                        // Disable reset button to prevent multiple concurrent requests
                        $button.prop( 'disabled', true );
 
-                       // Show progress bar
-                       if ( $progressBar ) {
-                               $progressBar.css( 'visibility', 'visible' );
-                       } else {
+                       if ( !$progressBar ) {
                                $progressBar = new OO.ui.ProgressBarWidget( { progress: false } ).$element;
                                $progressBar.css( {
                                        position: 'absolute',
                                        width: '100%'
                                } );
-                               $resetForm.append( $progressBar );
                        }
+                       // Show progress bar
+                       $resetForm.append( $progressBar );
 
                        // Use action=setnotificationtimestamp to mark all as visited,
                        // then set all watchlist lines accordingly
@@ -39,7 +37,7 @@
                                $button.prop( 'disabled', false );
                                // Hide the button because further clicks can not generate any visual changes
                                $button.css( 'visibility', 'hidden' );
-                               $progressBar.css( 'visibility', 'hidden' );
+                               $progressBar.detach();
                                $( '.mw-changeslist-line-watched' )
                                        .removeClass( 'mw-changeslist-line-watched' )
                                        .addClass( 'mw-changeslist-line-not-watched' );