我有一个bootstrap5模式，在jquery中有一些特定的功能。在加载内容之前，模式中会显示一个居中的微调器。
我遇到的问题是，在加载内容之前打开模式显示时，微调器需要花费一些时间来了解更多关于我所说的尝试查看示例链接的内容
当我点击按钮时，微调器不会快速显示，它首先显示内容，其次显示微调器，这是不正确的。
示例：https://codepen.io/themes4all/pen/vymexpy
jquery代码：

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