Display modal/alert with loading gif on form submit and redirect when complete

I would like to add a loading gif to my project. I have a HTML form that on submit goes to a PHP file and it builds a table from there. Depending on user input, the query could take awhile to run. I'd like a loading gif to display once the form submit button is clicked until the query is finished running and then redirect to the php script. I think I need to use AJAX if I am not mistaken. When I run the below code, nothing happens. In the console, I can see the Post to the php script was successful and the form data is sent but no redirect and no modal with my loading gif. Any help is extremely appreciated, I am just learning jquery/ajax. Here is what I've managed to code so far..

Jquery

$(function(){
        var form = $('#date_range');
        $(form).submit(function(e){
            e.preventDefault();
            var fData = $(form).serialize();
            var result = $.ajax({
                type: 'POST',
                url: 'test_loading_gif.php',
                data: fData
            });
            $('#loader').css("display","flex");
            result.done(function(response){
                $('#loader').css("display","none");
            });
        });
    });

HTML

<div id="loader"><img src='loading.gif' style='display:none;'></div>
<div style="width: 60%;margin: auto;display: flex;justify-content: center;">
<form id="date_range">
    <label for="first_date">Beginning Date:
        <input type="date" name="first_date" id="first_date" required>
    </label>
    <label for="2nd_date">End Date:
        <input type="date" name="second_date" id="second_date" required>
    </label><br>
    
    <input type="submit" value="Search">
</form>