I’m facing an issue with JavaScript code below where I’m trying to show a preloader after a button click and keep it showing until the page is redirected, only hiding it if an error occurs. However, the preloader is being removed a few moments prior to page redirection, giving the impression that it stopped.

Is there a workaround or a better approach to ensure that the preloader stays visible until the page redirection, without prematurely hiding it?

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

        $('#preloader').show();

        $.ajax({
            url: '/Account/Login/',
            type: 'POST',
            async: true,
            data: {
                //Data
            },
            success: function (response) {

                if (response != null && response.success) {
                    window.location.href = response.redirectURL;
                }

                else {
                    $('#preloader').hide();
                    $.Notification.autoHideNotify('error', 'top right', 'Error', response.responseText);
                }
            },
            error: function () {
                $('#preloader').hide();
                $.Notification.autoHideNotify('error', 'top right', 'Error', 'Forbidden');
            }
        });
    });
});

function hidePreloader() {
    $('#preloaderarea').hide();
    preloaderVisible = false;
}

$(window).on('beforeunload', function () {
    if (preloaderVisible && sessionStorage.getItem('redirecting') === 'true') {
        hidePreloader();
    }
});