Gadget is here for now: https://test.wikipedia.org/w/index.php?title=User:Fhocutt_%28WMF%29/common.js

Once the Citations button is clicked, it needs to be disabled so that you can't click it multiple times. Also, please insert a loading spinner next to the button after it is clicked so that the user knows that they should wait (rather than making further edits that will be overwritten).

Here's a loading spinner you can use:
<img src="//upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" />

Also, make sure that the state of the button and spinner are reset in the event that the API call fails.

@kaldari, I replaced the button with a spinner, in the loading state (instead of adding another element). Here's the JS: https://test.wikipedia.org/wiki/User:NKohli_(WMF)/common.js
(Also, it'll reset if the request fails along with an alert box)

Looks good, just 1 minor issue. The first time you use the button, it takes a second or two for the spinner to appear since it has to be retrieved from Commons. It would be better if the image were pre-loaded by the JavaScript. To do this you could add something like the following to the $( document ).ready():

if ( document.images ) {
	var spinner = new Image();
	spinner.src = "//upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif";
}

That will ensure that the image is cached in their browser when it tries to show it later.

The corresponding API is now available and up on citations on Labs.

I've fixed the spinner lazy loading issue. This is ready to go live! :)
https://test.wikipedia.org/wiki/User:NKohli_(WMF)/common.js

Awesome! Kaldari, could you use your admin privs to update this on enwiki?
The backend's live also.

@NiharikaKohli, @Fhocutt: One last issue. Since Gadgets are not loaded in the global scope (unlike user scripts), the call to citationsRequest() when clicking the Citations button won't work. Either the citationsRequest() function needs to be explicitly declared in the global scope (window.citationsRequest), or the code in citationsRequest() needs to be moved directly into an anonymous function in the click handler for the button.

Also, it isn't necessary to call the function from both 'onclick' and 'onkeydown'. Although 'onclick' sounds like it is only for mouse clicks, it is actually triggered by the default action of any button or link, regardless of whether it is by clicking or by focusing the element and hitting the enter key. This error is from the original gadget code, but we should go ahead and fix it so that it doesn't call the API twice when activating the button from the keyboard.

I moved the code on test.wiki into an actual gadget so that it's a more realistic testing situation: https://test.wikipedia.org/wiki/MediaWiki:Gadget-citations.js

In T116708#1814331, @kaldari wrote:

@NiharikaKohli, @Fhocutt: One last issue. Since Gadgets are not loaded in the global scope (unlike user scripts), the call to citationsRequest() when clicking the Citations button won't work. Either the citationsRequest() function needs to be explicitly declared in the global scope (window.citationsRequest), or the code in citationsRequest() needs to be moved directly into an anonymous function in the click handler for the button.

Wow, that's something I didn't know. Fixed now. https://test.wikipedia.org/wiki/MediaWiki:Gadget-citations.js is up to date.