Spinner não desaparece após requisição ter reornado sucesso e nem quando a requisição retorna erro

Para exemplificar melhor a minha duvida, havia criado uma lógica de ao clicar no X da mensagem de erro a mensagem desaparecesse, dito isso a minha hipótese é que o always não esteja funcionando devido esta função, abaixo deixo o trecho do codigo html, css e js:

<div class="center">
        <img src="./img/spinner.gif" alt="loading animado" id="spinner">
        <p id="erro"><i class="small material-icons icon-close">close</i>Ocorreu um erro, por favor tente novamente!</p>
</div>

#erro {
    color: #000;
    background-color: #ffbab5;
    width: 280px;
    padding: 0px 0px 19px 21px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: 6px solid #fa5056;
    text-align: left!important;
    display: none;
}

#spinner {
    display: none;
}

.icon-close {
    font-size: 18px!important;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.616);
    transform: translate(229px, 3px);
    transition: all .4s ease-out;
    display: flex;
    overflow: hidden;
}

$("#botao-frase").click(fraseAleatoria);

function fraseAleatoria() {

    $("#spinner").toggle();

    $.get("http://localhost:3000/23frases", trocaFraseAleatoria)
    .fail(function() {

        $("#erro").fadeIn(1000);

        $(".icon-close").click(function() {

            var closeBtn = $("#erro").fadeOut(1000);

            setTimeout(function() {

                closeBtn.toggle();

            }, 1000);

        }).always(function() {

            $("#spinner").toggle();

        });

    });

}

function trocaFraseAleatoria(data) {

    var frase = $(".frase");
    var numeroAleatorio = Math.floor(Math.random() * data.length);

    frase.text(data[numeroAleatorio].texto);

    atualizaTamanhoFrase();
    atualizaTempoInicial(data[numeroAleatorio].tempo);

}