Pages Loading Twice with Javascript

Hi,

I'm trying to build a loading navigation animation on my 7.1 website. 

A simple up/down curtain that opens on click and closes after the new page has loaded. But the first part of the animation seems to make the next page load twice (it doesn't happen on reloads). 

Is there a way to avoid it ? I've been looking everywhere and haven't figured out a way to do it on 7.1

My site is not open yet but here are the scripts I have :

In Header :

<div id="fullscreen-loader" class="fullscreen-loader"></div>

In Footer :

<script>
document.addEventListener('DOMContentLoaded', function() {
    var loader = document.getElementById('fullscreen-loader');

    // Immediately hide the loader if it's showing when the page loads.
    loader.style.animation = 'collapse 1s forwards';
    loader.addEventListener('animationend', function() {
        loader.style.display = 'none';
    }, { once: true });

    // Function to handle navigation after the exit animation
    function navigateAfterAnimation(href) {
        loader.style.display = 'block'; // Make sure the loader is visible
        loader.style.animation = 'none'; // Reset any previous animation
        void loader.offsetWidth; // Trigger reflow
        loader.style.animation = 'expand 0.5s forwards'; // Start the exit animation

        loader.addEventListener('animationend', function() {
            window.location = href; // Navigate after the animation completes
        }, { once: true });
    }

    // Attach this navigation logic to all links on the page
    document.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault(); // Prevent the default link behavior
            const href = this.getAttribute('href');
            navigateAfterAnimation(href);
        });
    });
});

</script>

And CSS :

/*LOADING SCREENS*/
.fullscreen-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Start fully expanded for the entering animation */
  background-color: black;
  z-index: 9999; /* High z-index to ensure it covers other content */
  display: block; /* Initially visible */
}

/* Collapse animation for entering */
@keyframes collapse {
  0% {
    top: 0;
    height: 100%;
  }
  100% {
    top: 100%;
    height: 0%;
  }
}

/* Expand animation for exiting */
@keyframes expand {
  0% {
    top: 100%;
    height: 0%;
  }
  100% {
    top: 0;
    height: 100%;
  }
}

Does anyone has an idea of what may be causing the issue ? Is there a fix or is it just not achievable with 7.1 ?

Thanks in advance!

L&F

Can you share site url? We can check effect easier