Show and Hide Bootstrap Modal for displaying Loading Image - bootstrap-modal

Question

I have a modal with a GIF image that i used for Loadin instead of using spinners. However there are times that the modal_loading is not hiding after calling the hide_loading function.
<script>
function show_loading(title="", message=""){
$('#loading_title').html('');
$('#loading_message').html('');
if(title != ""){
$('#loading_title').html("<h5 style='padding:7px;font-weight:bold'>"+ title + "</h5>");
}
if(message != ""){
$('#loading_message').html("<p style='padding:7px'>" + message + "</p>");
}
$('#modal_loading').modal('show');
}
function hide_loading(){
$('#modal_loading').on('shown.bs.modal', function (e) {
$("#modal_loading").modal('hide');
})
}
</script>
Here is my code.
function fetch_data(page, sort_type, sort_by) {
show_loading('Populating Table');
var filter = $('#form_filter').serialize();
$.ajax({
url: "/lrmis-learning_resources/get_ajax_data?sortby=" + sort_by + "&page=" + page + "&sorttype=" + sort_type + "&" + filter,
success: function(data) {
$('#my_table').html(data);
clear_icon();
if (sort_type == "desc") {
$('#' + sort_by + '_icon').html('<span class="fa fa-caret-down"></span>');
} else {
$('#' + sort_by + '_icon').html('<span class="fa fa-caret-up"></span>');
}
hide_loading();
}
});
}