In my Bootstrap 5 modal, I have implemented specific functionality in jQuery where a centered spinner is supposed to show up in the modal before loading the content. You can see a live example of this here.
The issue I am facing is that the spinner takes time to display when the modal is opened, instead of showing up instantly before loading the content. To better understand the problem, check out the example link provided.
When I click the button, the spinner does not appear quickly. Instead, the content is displayed first, followed by the spinner, which is not the correct behavior.
Live Example: https://codepen.io/themes4all/pen/vYmeXpy
jQuery Code:
(function ($) {
"use strict";
$(window).on("load", function () {
if ($(".modal").length) {
$(".modal").modal("show");
$(".modal").on("shown.bs.modal", function (e) {
e.preventDefault();
$(".spinner")
.removeClass("d-none")
.delay(3000)
.fadeOut(500, function () {
$(this).addClass("d-none");
});
return false;
});
$(".btn-close").on("click", function (e) {
e.preventDefault();
var swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-danger me-3",
},
buttonsStyling: false,
});
swalWithBootstrapButtons
.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
icon: "warning",
confirmButtonText: "<i class='fas fa-check-circle me-1'></i> Yes, I am!",
cancelButtonText: "<i class='fas fa-times-circle me-1'></i> No, I'm Not",
showCancelButton: true,
reverseButtons: true,
focusConfirm: false,
})
.then((result) => {
if (result.isConfirmed) {
$(".modal").modal("hide");
}
});
return false;
});
}
});
})(window.jQuery);