How to load pre loader on click rather then 1 second before page load

Question

Objective: To show preloader on click globally rather than show 1 second before page actually loads.

Scenario: The website hosts a heavy mandatory plugin, when clicking on the page that loads that plugin it take 6 seconds to load, I want to let users know something is happening.

Code:

`add_action( 'wp_head', function () { ?>
<style>
/** Body Overlay **/
body #load {
display: block;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9901;
opacity: 1;
background-color: #FFFFFF;
visibility: visible;
-webkit-transition: all .35s ease-out;
transition: all .35s ease-out;
}
body #load.loader-removed {
opacity: 0;
visibility: hidden;
}
.spinner-loader .load-wrap {
background-image: url("https://prestigekeyscarhire.com/cibudar/uploads/2022/02/PK-pre-                
loader.png");
background-position: center center;
background-repeat: no-repeat;
text-align: center;
width: 100%;
height: 100%;
}
</style>
<div id="load" class="spinner-loader"><div class="load-wrap"></div></div>
<script type="text/javascript">
// Javascript function to display loader on page load
document.addEventListener("DOMContentLoaded", function(event) {
    var $load = document.getElementById("load");
    var removeLoading = setTimeout(function() {
        $load.className += " loader-removed";
    }, 500);
});
</script>
<?php } );