Estoy tratando de agregar un pequeño retraso (2 segundos) entre el ícono del cargador y el éxito con los datos como html.

Lo que intenté usar es setTimeout y puse un número de retraso. Esto no funciona, así que esperaba que me mostraras cuál es la forma correcta.

Mi código ajax:

<script type="text/javascript">

$(function () {

    var delay = 2000;

    var res = {
        loader: $("<div />", { class: "loader" })
    };

    $('#search').on('click', function () {
        $.ajax({
            type: 'GET',
            url: "@Url.Action("Find", "Hotel")",
            datatype: "html",
            beforeSend: function () {
                $("#group-panel-ajax").append(res.loader);
                setTimeout(delay);
            },

            success: function (data) {
                $("#group-panel-ajax").find(res.loader).remove();
                $('#group-panel-ajax').html($(data).find("#group-panel-ajax"));
            }
        });
        return false;
    });
});

</script>

En este momento funciona muy rápido. Espero que alguien pueda ayudar.