html – ordenar divs con jquery


// Ordena los productos ascendentemente y descententemente //

$('.container_loader').hide();

    var product = $('.producto');

    function order_motorcycle(){ // Ordenar ascendentemente //
    product.sort(function(a, b){
    return a.textContent > b.textContent ? 1 : -1;
    }).appendTo('.right_section');
    } order_motorcycle();

    $('#order_products').change(function(){
    
    product.hide().delay(3000).fadeIn(3000); // <-- Si elimino esto, se resuelve mi problema //
    
    $('.container_loader').fadeIn(1000).delay(2000).fadeOut();

    if($('option:nth-of-type(2)').is(':selected')){
    
    product.sort(function(a,b){ // Ordena descendentemente //
    return a.textContent < b.textContent ? 1 : -1;
    }).appendTo('.right_section');
    } else {
    order_motorcycle();
    }
      });
      
      function buscar() {
    var buscador = $('#buscador').val().toLowerCase();
    var not_found = true;
    var listCategory = '';
    $('.producto span').each(function () {
        var name_products = $(this).text().toLowerCase();
        if (name_products.indexOf(buscador) !== -1) {
            var category_products = $(this).parents('.producto').attr('category');
            $(this).parents('.producto').show();
            not_found = false;
            listCategory += category_products; 
            //Concateno todo lo que se vaya a mostrar en una sola variable y la valido al final.
        }
        else {
            $(this).parents('.producto').hide();
        }

        if (!not_found) {
            $('#text').hide();
        } else {
            $('#text').show();
            $('.btn-check').prop('checked', false);
        }

    });
    if (listCategory.length > 0) {//Aqui hare la validación de tus checkbox
        $('.btn-check').each(function () {
            var check = $(this).attr('category');
            if (listCategory.indexOf(check) !== -1) {
                $(this).prop('checked', true);
            } else {
                $(this).prop('checked', false);
            }
        });
    }
}
$('#buscador').on('keypress', function (e) {
    if (e.keyCode == 13) {
        buscar();
    }
});

// Buscador //
$('#button_search').on('click', function () {
    buscar();
});

// Casillas checkbox //
$('.btn-check').prop('checked', true);
$('#apply_filter').on('click', function () {
    $('.producto').hide();
    $('#text').hide();
    $('.btn-check:checked').each(function () {
        var input_category = $(this).attr('category');
        $('.producto(category*="' + input_category + '")').show();

    });
});

$('#all').on('click', function () {

    if ($('#all').is(':checked')) {
        $('.btn-check:not(#all)').prop('checked', true);
    } else if ($('#all').not(':checked')) {
        $('.btn-check:not(#all)').prop('checked', false);
    }

});
    
body{
display: flex;
}
.left_section{
width: 30%;
background: #cdcdcd;
}
.left_section select{
display: block;
margin: auto;
font-size: 1.65em;
}
.right_section{
width: 70%;
background: #ededed;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
.producto{
width: 25%;
text-align: center;
background: #cdcdcd;
display: table;
}
img{
width: 100%;
}
.container_loader{
display: none;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
}
.loading{

display: flex;
justify-content: center;
align-items: center;
}
.loader{
width: 35px;
height: 35px;
background: transparent;
border-radius: 50%;
border: 3.5px solid;
border-right-color: #CDCDCD;
border-top-color: #CDCDCD;
border-bottom-color: #CDCDCD;
animation: spin .5s linear infinite;
margin-right: 1%;
}
@keyframes spin {
0%{
    background-color:transparent;
    transform: rotate(360deg);
}
    }
#text{
font-size: 2vw;
position: relative;
padding: 25%;
display: none;
}
.category{
display: block;
}
.category input,
.category label{
cursor: pointer;
font-size: 1.25rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<aside class="left_section">

    <select id="order_products">
        <option>Ordenar ascendentemente</option>
        <option>Ordenar descendentemente</option>
    </select>
    <input type="text" id="buscador" placeholder="Buscar moto..." maxlength="36">
    <button id="button_search">Buscar</button>
    <span class="category"><input type="checkbox" class="btn-check" id="all" category="all"><label for="all">All</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="verde" category="verde"><label for="verde">moto de color verde</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="rojo" category="rojo"><label for="rojo">moto de color rojo</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="blanco" category="blanco"><label for="blanco">moto de color blanco</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="gris" category="gris"><label for="gris">moto de color gris</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="negro" category="negro"><label for="negro">moto de color negro</label></span>
    <button id="apply_filter">Aplicar filtro</button>

</aside>

<aside class="right_section">

<div class="producto" category="all gris"><img src="https://www.formulamoto.es/elementosWeb/gestionCajas/FOM/Image/2018//kawasaki-ninja-H2R.jpg"><span>Moto Rfa 2000</span></div>

<div class="producto" category="all verde"><img src="https://www.formulamoto.es/elementosWeb/gestionCajas/FOM/Image/2018//kawasaki-ZX-10RR_g.jpg"><span>Sudora KFI</span></div>

<div class="producto" category="all blanco"><img src="https://as.com/betech/imagenes/2017/10/13/portada/1507918164_397427_1507918224_noticia_normal.jpg"><span>Z-moto 6000 turbo</span></div>

<div class="producto" category="all negro"><img src="https://www.crmotos.com/motocicletas/formula/bajacilindrada/sport/sportx200/fotos/1M.jpg"><span>Hirasc 300k</span></div>

<div class="producto" category="all rojo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTt-wqMoSBYFaR6dIJE9a02yMmQJl6AUYrYnQ&usqp=CAU"><span>Az Mini-Inferno 10000</span></div>

<div class="producto" category="all gris"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAk-Q8UCYkf4YBLwh6QZr1yx-gB8mbn0Hh9Q&usqp=CAU"><span>Droma T legacy</span></div>

<div class="producto" category="all blanco"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRcHyCIrQoZjVqudofBdi_qh9wGiRJfdpbZxw&usqp=CAU"><span>KazaQ Op</span></div>

<div class="producto" category="all negro"><img src="https://www.crmotos.com/motocicletas/formula/bajacilindrada/sport/sportx200/fotos/1M.jpg"><span>Marine T-5000</span></div>

<div class="container_loader">
<div class="loading">
    <div class="loader"></div>
    <p>Cargando productos...</p>
</div>
</div>

<p id="text">No se encontraron resultados...</p>

</aside>

Hola a todos, tengo un pequeño problema para ordenar divs , si haces clic en un option, te ordena segun lo que dice el option, ahora para ordenar seleccione todos los div con clase producto, y los ordene segun su texto, le agregue un efecto, que se oculte por 3 seg (lo que dura en aparecer el loading) y que luego me genere un fadeIn, si elimino este efecto, se resuelve el problema, me ordena segun el filtro que tenga, es decir, si tiene marcadas las casillas de moto de color gris y moto de color blanco, y luego le das en ordenar ascendentemente o lo contrario a esta, te los ordena normal, solo si le quitas product.hide().delay(3000).fadeIn(3000); , ahi viene mi problema, ¿Cómo hago para que me ordene normal teniendo este efecto? , es decir, que los productos mostrados dependiendo de las casillas marcadas, o los productos buscados en el input text se ordenen teniendo el efecto antes mencionado. Gracias de antemano.