Why doesn't JQuery .hide() function work with bootstrap spinner?

Question

I am doing a simple spinner feedback while my server answers an ajax query. I call the JQuery .show() function before making the ajax call and have the .hide() function called in the .always() callback of the request.

But my spinner never hides ! I don't understand why... has anybody encountered this problem using the .hide() function of JQuery with a Bootstrap spinner ?

More info on .getJSON() here, more info on the .hide() and .show() here.

This is my html spinner, it commes from here

<div id="spinner-map-right-click" class="d-flex justify-content-center">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

This is my javascript :

$('#spinner-map-right-click').show()
$.getJSON({ url: "myurl" })
    .done(function(data) {
        // does stuff here and it works
    })
    .fail(function(data) {
        // display error message if there is an error
    })
    .always(function(data) {
        console.log("Hiding")
        // the console log displays but my spinner is always ther :(
        $('#spinner-map-right-click').hide()
    });

The request works, I get the data correctly and "Hiding" is displayed correctly so the always() callback is correctly called and when I inspect the code from Firefix I see the <div> has been correctly modified :

<div id="spinner-map-right-click" class="d-flex justify-content-center" style="display: none;">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>

Answer 1

It's because of d-flex class. You can try

$('#spinner-map-right-click').addClass('d-none') // removeClass('d-none')

d-flex by bootstrap using !important exception which override inline style