My website appears for few mili seconds then preloader then website

Question

My website preloader is not showing properly first the website appears for a few mili seconds then preloader then the website.

I am using Elementor WordPress, I have added the preloader code in my theme file editor here is the code snippet

"add_action('wp_footer', 'Allprocoding_Preloader');

function Allprocoding_Preloader() {
    if (!is_admin() && $GLOBALS["pagenow"] !== "wp-login.php") {
        
        $delay = 1; // seconds
        $desktop_loader = 'https://spoky.co/wp-content/uploads/2024/02/Group-1171275193-1.gif';
        $mobile_loader = 'https://spoky.co/wp-content/uploads/2024/02/mobile-.gif';
        $overlayColor = '#ffffff';
        ?>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                var preloader = document.createElement('div');
                preloader.style.position = 'fixed';
                preloader.style.top = '0';
                preloader.style.bottom = '0';
                preloader.style.left = '0';
                preloader.style.right = '0';
                preloader.style.backgroundColor = '<?php echo esc_js($overlayColor); ?>';
                preloader.style.zIndex = '100000';
                preloader.style.display = 'flex';
                preloader.style.alignItems = 'center';
                preloader.style.justifyContent = 'space-around';

                var loaderImg = document.createElement('img');
                loaderImg.src = '<?php echo esc_url($desktop_loader); ?>';
                loaderImg.alt = '';
                loaderImg.style.height = '30vw';

                preloader.appendChild(loaderImg);
                document.body.appendChild(preloader);

                document.body.style.overflow = "hidden";
                var mediaQuery = window.matchMedia("only screen and (max-width: 760px)");

                function handleMediaChange(event) {
                    if (event.matches) {
                        loaderImg.src = '<?php echo esc_url($mobile_loader); ?>';
                        loaderImg.style.height = '20vw';
                    } else {
                        loaderImg.src = '<?php echo esc_url($desktop_loader); ?>';
                        loaderImg.style.height = '15vw';
                    }
                }

                mediaQuery.addListener(handleMediaChange);
                handleMediaChange(mediaQuery);

                window.addEventListener("load", function () {
                    // Remove the preloader after the delay
                    setTimeout(function () {
                        preloader.remove();
                        document.body.style.overflow = "visible";
                    }, <?php echo esc_js($delay * 1000); ?>);
                });
            });
        </script>
        <?php
    }
}

what to do to make the prelaoder appears perfectly fine

I have tried adding code to inline css and and preload css and JavaScript files but there is no change in the scenario. What are other possible ways to figure out this issue?