Add spinning loader (from lux!) to track detach button

closes #2426

app/javascript/components/playlist_member.vue

@@ -1,12 +1,16 @@
 <template>
   <tr>
-    <td>{{ resource.label[0] }} (<a :href="`${resource.recording_url}`">{{ resource.recording_title }}</a>)</td>
+    <td>
+      {{ resource.label[0] }} (<a :href="`${resource.recording_url}`">
+        {{ resource.recording_title }}
+      </a>)
+    </td>
     <td>
       <button
-        class="btn btn-danger"
-        @click="$emit('update', id)"
+        class="btn btn-danger detach-btn"
+        @click="detach($event)"
       >
-        Detach
+        <loader size="x-small" v-if="detachClicked" wrapper="span"></loader> Detach
       </button>
     </td>
   </tr>
@@ -25,10 +29,23 @@ export default {
     // This is due to the fact that Valkyrie::ID objects are not serialized as strings
     const resourceId = this.resource.id
     return {
-      id: resourceId.id
+      id: resourceId.id,
+      detachClicked: false
+    }
+  },
+  methods: {
+    detach: function (event) {
+      this.detachClicked = true
+      this.$emit('update', this.id)
     }
   }
 }
 </script>
 <style scope>
+.lux-loader {
+  display: inline-block;
+}
+.detach-btn {
+  width: 150px;
+}
 </style>