Fix #100: Added some feedback on the play button

changes/changelog.d/100.bugfix

@@ -0,0 +1 @@
+Added some feedback on the play button (#100)

front/src/components/audio/PlayButton.vue

@@ -1,6 +1,9 @@
 <template>
   <div :class="['ui', {'tiny': discrete}, 'buttons']">
-    <button title="Add to current queue" @click="add" :class="['ui', {'mini': discrete}, {disabled: playableTracks.length === 0}, 'button']">
+    <button
+      title="Add to current queue"
+      @click="add"
+      :class="['ui', {loading: isLoading}, {'mini': discrete}, {disabled: playableTracks.length === 0}, 'button']">
       <i class="ui play icon"></i>
       <template v-if="!discrete"><slot>Play</slot></template>
     </button>
@@ -26,6 +29,11 @@ export default {
     track: {type: Object, required: false},
     discrete: {type: Boolean, default: false}
   },
+  data () {
+    return {
+      isLoading: false
+    }
+  },
   created () {
     if (!this.track & !this.tracks) {
       logger.default.error('You have to provide either a track or tracks property')
@@ -50,10 +58,19 @@ export default {
     }
   },
   methods: {
+    triggerLoad () {
+      let self = this
+      this.isLoading = true
+      setTimeout(() => {
+        self.isLoading = false
+      }, 500)
+    },
     add () {
+      this.triggerLoad()
       this.$store.dispatch('queue/appendMany', {tracks: this.playableTracks})
     },
     addNext (next) {
+      this.triggerLoad()
       this.$store.dispatch('queue/appendMany', {tracks: this.playableTracks, index: this.$store.state.queue.currentIndex + 1})
       if (next) {
         this.$store.dispatch('queue/next')