<template>
  <div
    v-if="loading"
    :style="{minHeight: minHeight}"
    :class="loadClass"
    class="snt-loading__load">
    <v-progress-circular
      :size="size"
      :width="1"
      color="secondary"
      indeterminate />
  </div>
  <div
    v-else
    :class="contentClass">
    <slot />
  </div>
</template>

<script>
import {
  VProgressCircular
} from 'vuetify/lib'

export default {
  name: 'Loading',
  components: {
    VProgressCircular
  },
  props: {
    size: {
      type: Number,
      default: 18
    },
    loadClass: {
      type: String,
      default: ''
    },
    contentClass: {
      type: String,
      default: ''
    },
    minHeight: {
      type: String,
      default: 'auto'
    },
    loading: Boolean
  },
  watch: {
    loading (newValue, oldValue) {
      if (oldValue) {
        this.$emit('loaded')
      }
    }
  }
}
</script>

<style scoped>
  .snt-loading__load {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
