Adding A Loader After Clicking Submit Button On A Form (loader Keeps Repeating)

My goal is to replace the form submission button with an image loader after click so that when an uploaded image is loading, the user won't just look at a blank screen. I achieved

Solution 1:

The problem is on every click you are adding a new image, also you are adding multiple submit handlers

$(document).ready(function () {
    var $btn = $("input[name='application-submit']").hover(function () {
        $(this).toggleClass("btn-hover");
    });
    $("form").submit(function () {
        var $img = $btn.next('.loader').show();
        if (!$img.length) {
            $img = $('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">').css({
                position: 'relative',
                top: 0,
                left: 0
            }).insertAfter($btn);
        }
        $btn.hide();
    });
});