Espaço fixo/reservado para o spinner e a mensagem de erro.

E aí, o spinner de vocês tá rodando mais que BeyBlade? Espero que sim!

Resolvi usar outra opção de spinner utilizando só CSS. Ficou bonitinho, mas tem um problema: a tela salta sempre que é preciso dar "load" na animação. Na verdade, o que eu quero dizer é que os elementos já renderizados precisam se redistribuir para acomodar a animação e também a mensagem de erro e isso é muito feio.

A solução que eu conheço para esse problema é usar o {visibility: hidden} no CSS, assim o elemento fica "escondido", mas o espaço reservado para ele continua lá. A questão é que a lógica p/ implementar isso lança mão de um {variável.style.visibility = "hidden/visible"} lá no JavaScript e eu não quero alterar o estilo por lá. Algum sugestão p/ fazer isso direto no CSS?

Abaixo estão os trechos do meu código que estão diferentes:

HTML:

...
        <div class="spinner center">
            <div class="s s1"></div>
            <div class="s s2"></div>
            <div class="s s3"></div>
            <div class="s s4"></div> 
        </div>

        <div class="center">
            <p id="erro">Oh, não! Ocorreu um erro, por favor, tente novamente.</p>
        </div>
...

CSS:

...
#erro {
    padding: 2rem;
    color: red;
    font-weight: bold;
    width: max-content;
    margin: 0 auto;
    display: none;
    font-size: 1.2rem;
}
...

CSS-Spinner:

.spinner {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    margin-top: 20px;
    display: none;
}

.spinner .s {
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border-left: 4px solid;
    border-right: 4px solid;
    border-top: 4px solid transparent !important;
    border-bottom: 4px solid transparent !important;
    animation: spin 2s infinite;
    position: relative;
    top: 50%;
    left: 50%;
}

.spinner .s1 {
    border-color: #eb3b5a;
    width: 60px;
    height: 60px;
    position: absolute;
}

.spinner .s2 {
    border-color: #f7b731;
    width: 50px;
    height: 50px;
    position: absolute;
    animation-delay: 0.2s;
}

.spinner .s3 {
    border-color: #20bf6b;
    width: 40px;
    height: 40px;
    position: absolute;
    animation-delay: 0.4s;
}

.spinner .s4 {
    border-color: #8854d0;
    width: 30px;
    height: 30px;
    position: absolute;
    animation-delay: 0.6s;

}

@keyframes spin {
    0% {transform: translate(-50%, -50%) rotate(0deg);}
    50% {transform: translate(-50%, -50%) rotate(-180deg);}
    100% {transform: translate(-50%, -50%) rotate(0deg);}
}

JS-Frase:

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

function fraseAleatoria() {
    var spinner = $(".spinner");
    spinner.toggle();

    $.get("http://localhost:3000/frases", trocaFraseAleatoria)
        .fail(function() {
            $("#erro").show();
            setTimeout(function () {
                $("#erro").fadeOut(1000);
            }, 3000);
        })
        .always(function() {
            spinner.toggle();
        });
}

function trocaFraseAleatoria(data) {
    //console.log(data);
    var frase = $(".frase");
    var numAleatorio = Math.floor(Math.random() * data.length);
    frase.text(data[numAleatorio].texto);
    atualizaTamanhoFrase();
    atualizaTempoInicial(data[numAleatorio].tempo);
}