<template>
    
</template>

<script>
import { QSpinnerHourglass } from 'quasar'

export default {
  props:['showLoader'],
  mounted(){
    if(this.showLoader){
        this.startLoader();
    }else{
        this.stopLoader();
    }
  },
  data(){
      return {
          timer:false
      }
  },
  methods: {
    startLoader () {
      /* This is for Codepen (using UMD) to work */
      const spinner = typeof QSpinnerHourglass !== 'undefined'
        ? QSpinnerHourglass // Non-UMD, imported above
        : Quasar.components.QSpinnerHourglass // eslint-disable-line
      /* End of Codepen workaround */

      this.$q.loading.show({
        spinner,
        spinnerColor: 'yellow',
        spinnerSize: 140,
        backgroundColor: 'purple',
        message: 'Some important process is in progress. Hang on...',
        messageColor: 'black'
      });
      this.timer=true;
    },
    stopLoader(){
        this.$q.loading.hide();
        this.timer=false;
    }
  },

  beforeDestroy () {
    if (this.timer) {
      clearTimeout(this.timer)
      this.$q.loading.hide()
    }
  }
}
</script>