<template>
  <span>
    {{ $t(messageId || 'loading') }} {{ indicator }}
  </span>
</template>

<script>
export default {
  props: {
    messageId: null
  },

  data()
  {
    return {
      stage: 0,
      indicator: '|'
    };
  },

  created()
  {
    const self = this;

    self.timer = setInterval(() =>
    {
      self.stage++;
      switch (self.stage)
      {
        case 1: self.indicator = '/'; break;
        case 2: self.indicator = '-'; break;
        case 3: self.indicator = '\\'; break;
        case 4: self.indicator = '|'; self.stage = 0; break;
      }
    }, 250);
  },

  destroyed()
  {
    clearInterval(this.timer);
  }
}
</script>