Preloader com delay estático em função JS

Fala Galera!

Não estou conseguindo fazer com que meu preloader funcione corretamente, pois mesmo declarando na função o delay via setTimeout não é executado. Ao mesmo tempo, o meu fadeOut não está respeitando o tempo que estipulei, pulando direto e sem efeito para a página inicia da aplicação.

Preciso que ele execute independente do tempo de carregamento do site por 6 segundo(tempo de exec do gif).

(é uma aplicação angular, sintam-se a vontade para indicar soluções nativas do angular também)

Agradeço de antemão a ajuda!!!

<script type="text/javascript">
      window.addEventListener("load", function () {
        setTimeout(function () {
          const loader = document.querySelector(".loader");
          loader.className += " hidden"; // class "loader hidden"
        }, 6000);
      });
    </script>

###  CSS  ###
.loader.hidden {
        animation: fadeOut 4s;
        animation-fill-mode: forwards;
      }

      @keyframes fadeOut {
        100% {
          opacity: 0;
          visibility: hidden;
        }
      }

    <script type="text/javascript">
      window.onload = function (){
        window.addEventListener("onload", function () {
            $('.loader').show();
          });
          setTimeout(function(){
            $('.loader').hide();
          }, 6500);}  
    </script>

<!-- html -->

    <div class="loader" id="fadeOut">
          <img src="/assets/loader/loading.gif" />
    </div>

<!-- CSS -->
.loader {
      position: fixed;
      z-index: 99;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: black;
      display: flex;
      justify-content: center;
      align-items: center;
    }