Bootstrap 5 Modal & jQuery - centered spinner take time to show up before content loading

Question

I have a bootstrap 5 modal with some specific functionality in jQuery a centered spinner shows up in the modal before loading the content here is a live example from here.

the issue that I have is the spinner take time when the modal opened to show up before loading content to know more about what I'm talking about trying to view the example link

while I click to button the spinner does not show up fast it displays the content first and secondly the spinner and this it's not correct.

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);

Answer 1

Live example

What you are doing right now is trying to remove class .d-none ( display: none!important ) on the spinner, which is working slower than content loading. What you should do is the opposite thing: the spinner should be shown by default and you need to hide it when content loads. So, you need to remove all classes with the display !important (d-flex, d-none), need to hide spinner on content load and need to show it back on modal close .

Added CSS:

.spinner {
  display: flex;
}

jQuery:

(function ($) {
    "use strict";

    $(window).on("load", function () {
        if ($(".modal").length) {
            $(".modal").modal("show");
            $(".modal").on("shown.bs.modal", function (e) {
                e.preventDefault();
                $(".spinner")
                    .delay(3000)
                    .fadeOut(500);
                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");
                          $(".spinner").delay(1000).show(100);
                        }
                    });
                return false;
            });
        }
    });
})(window.jQuery);