mediawiki.page.watch.ajax: Disable watch link while waiting for API response

Previously clicking the watch link several times in a row would fire
several requests to the API, and the final result would depend on the
order in which they arrived. Let's not allow that.

This also removes the special-case for the 'loading' class, it is now
always added or removed.

Change-Id: Ib91ec8505d04945dc77e48ab70b5c94e3da47d9c

diff --git a/resources/src/mediawiki.page/mediawiki.page.watch.ajax.js b/resources/src/mediawiki.page/mediawiki.page.watch.ajax.js
index 3b0aeee..15e9aba 100644 (file)
--- a/resources/src/mediawiki.page/mediawiki.page.watch.ajax.js
+++ b/resources/src/mediawiki.page/mediawiki.page.watch.ajax.js
@@ -57,13 +57,10 @@
                        $li.prop( 'id', 'ca-' + action );
                }
 
-               // Special case for vector icon
-               if ( $li.hasClass( 'icon' ) ) {
-                       if ( state === 'loading' ) {
-                               $link.addClass( 'loading' );
-                       } else {
-                               $link.removeClass( 'loading' );
-                       }
+               if ( state === 'loading' ) {
+                       $link.addClass( 'loading' );
+               } else {
+                       $link.removeClass( 'loading' );
                }
        }
 
@@ -133,6 +130,10 @@
 
                        $link = $( this );
 
+                       if ( $link.hasClass( 'loading' ) ) {
+                               return;
+                       }
+
                        updateWatchLink( $link, action, 'loading' );
 
                        api = new mw.Api();

diff --git a/skins/vector/components/watchstar.less b/skins/vector/components/watchstar.less
index 1a6d1fc..a389ed6 100644 (file)
--- a/skins/vector/components/watchstar.less
+++ b/skins/vector/components/watchstar.less
@@ -36,6 +36,8 @@
        .rotation(700ms);
        /* Suppress the hilarious rotating focus outline on Firefox */
        outline: none;
+       cursor: default;
+       pointer-events: none;
        background-position: 50% 60%;
        -webkit-transform-origin: 50% 57%;
        transform-origin: 50% 57%;