JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="Pagina XXX">

<div class="conteudoActual">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis amet deleniti laudantium obcaecati facilis iste expedita dicta rerum soluta nesciunt voluptas molestiae sunt beatae consectetur ab dolorum ullam. Sed facilis.
</div>    
    
<div class="conteudo">
    
</div>
    
<div class="carregando">
    <h1>A carregar</h1>
</div>

CSS

.conteudoActual{
    width: 500px;
    height: 100px;
    border: 1px solid red;
}

.conteudo{
    width: 500px;
    height: 100px;
    border: 1px solid blue;
    display: none;
}

.carregando{
    display: none;
}

JavaScript

$(document).ready(function() {
    var paginaXXX = "paginaXXX.php";
    
    // On click faz o load
    $('input[type="button"]').click(function(){
        // Oculta a pagina actual
        $('.conteudoActual').hide();
        
        // Mostra a div carregando
        $('.carregando').fadeIn();
        
        // Lê o conteudo e quando o conteúdo for lido 
        // apresenta a pagina
        $('.conteudo').load(paginaXXX, function() {
            
            // Oculta o carregando
            $('.carregando').hide();
            
            // Mostra a página requisitada
            $('.conteudo').fadeIn();
        });
    });
});