<script lang="ts">
  import { navigating } from '$app/stores';
  import { loadEvent } from '../../store';

  let load = true;

  loadEvent.subscribe((value) => {
    load = value;
  });
</script>

{#if !$navigating && !load}
  <div class="preloader">
    <div class="preloader__loader" />
  </div>
{/if}

<style lang="scss">
  .preloader {
    width: 100%;
    height: 100vh;
    background: white;
    position: fixed;
    z-index: 1000;
    visibility: visible;
    top: 0;
    left: 0;
    text-align: center;
    pointer-events: all;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s all;

    &__loader {
      width: 48px;
      height: 48px;
      border: 3px solid transparent;
      border-radius: 50%;
      display: inline-block;
      position: relative;
      box-sizing: border-box;
      animation: rotation 1s linear infinite;

      &::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 3px solid;
        border-color: #fe4d0d transparent;
      }
    }
  }

  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>