Aggiungere icona caricamento su "aggiungi al carrello"

[DARKF3D3]

Sto cercando di implementare un icona di caricamento che venga mostrata sul bottone aggiungi al carrello quando viene cliccato. L'icona deve poi essere tolta una volta completata l'aggiunta del prodotto al carrello (ad esempio quando si apre il carrello).

Come prima cosa ho creato l'elemento html con la classe "position:absolute" in modo da far si che copra il bottone aggiungi al carrello, dopodiché ho messo anche la classe "display:none" in modo che inizialmente non venga mostrato.

Poi ho usato questo script per mostrare l'elemento nel momento in cui l'utente clicca sul bottone "aggiungi al carrello":

$( '.add-to-cart' ).on( 'click', function(){
   document.getElementsByClassName('loading-spinner')[0].style.display = 'block';
});

Risultato:
Quando si clicca su "aggiungi al carrello" lo spinner di caricamento viene mostrato correttamente, però nonostante non abbia ancora impostato niente nello script che faccia nascondere nuovamente l'elemento, l'icona viene comunque nascosta alla chiusura del modal cart e cliccando una seconda volta sul bottone aggiungi al carrello l'icona di caricamento non viene più mostrata.

Non mi è chiaro dove sbaglio. Idee?