ローダーがページ遷移するときに発生しないようにしたい

Question

前提・実現したいこと

四角形の黒い図形が回転するローダーを組んでいるんですが、別のページからトップページに飛ぶ時も毎回ローダーが出てきてしまいます。ページ遷移するときはローダーが出てこないようにする方法はないでしょうか。

該当のソースコード

    <div id="loader" class="loader active">
      <div class="loader-item"></div>
    </div>

@mixin animation (
    $name,
    $duration: 1s,
    $delay: 0s,
    $iteration-count: 1,
    $timing-function: ease,
    $direction: normal,
    $fill-mode: forwards
) {
    animation: {
        name: $name;
        duration: $duration;
        delay: $delay;
        iteration-count: $iteration-count;
        timing-function: $timing-function;
        direction: $direction;
        fill-mode: $fill-mode;
    }
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 30px;
    background: white;
    z-index: 100;
    opacity: 0;
    transition: .5s;
    perspective: 120px;
    perspective-origin: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
}

.loader.active {
    opacity: 1;
    visibility: visible;
}

.loader.active .loader-item {
    width: 50px;
    height: 50px;
    background:rgba(0, 0, 0);
    @include animation (
        $name: loaderSquare,
        $duration: 1s,
        $iteration-count: infinite,
        $timing-function: ease-in-out
    );
}

@keyframes loaderSquare {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotateX(-180deg);
    }
    100% {
        transform: rotateX(-180deg) rotateY(-180deg);
    }
}

  function loaderAnimation () {
    const loaderElement = document.querySelector('#loader');
    loaderElement.classList.remove('active');
}

window.addEventListener('DOMContentLoaded', function(){
    setTimeout(loaderAnimation, 2000)
},
{once: true});

試したこと

once: trueを使いましたが、何も変わりませんでした。

補足情報（FW/ツールのバージョンなど）

Macbook Air M1