<template>
  <div>
    <div v-if="isLoading" class="loader">
      <span>Laden...</span>
    </div>
    <div class="d-flex flex-column h-100" v-else>
      <slot/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .loader {
    height: 20vh;
    padding: 10vh;
    text-align: center;

    span {
      position: relative;

      &::after, &::before {
        content: ' ';
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: currentColor;
        opacity: 0.6;
        position: absolute;
        bottom: 2em;
        left: 0;
        animation: sk-bounce 2.0s infinite ease-in-out;
      }

      &::after {
        animation-delay: -0.8s;
        opacity: 0.4;
      }
    }

    @keyframes sk-bounce {
      0%, 100% {
        transform: scale(0.0);
      }
      50% {
        transform: scale(1.0);
      }
    }
  }
</style>

<script>
export default {
  docs: `Toont een loader ipv de inhoud als het parent component nog aan het laden is.
    Dat kan door een <code>is-loading</code> property (evt computed) mee te geven.`,
  props: {
    isLoading: {
      type: Boolean,
      required: true,
    }
  }
};
</script>
