List edit UI overhaul

src/components/lists_user_search/lists_user_search.js

@@ -15,6 +15,7 @@ const ListsUserSearch = {
   components: {
     Checkbox
   },
+  emits: ['loading', 'loadingDone', 'results'],
   data () {
     return {
       loading: false,
@@ -33,12 +34,16 @@ const ListsUserSearch = {
       }
 
       this.loading = true
+      this.$emit('loading')
       this.userIds = []
       this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: this.followingOnly })
         .then(data => {
-          this.loading = false
           this.$emit('results', data.accounts.map(a => a.id))
         })
+        .finally(() => {
+          this.loading = false
+          this.$emit('loadingDone')
+        })
     }
   }
 }

src/components/lists_user_search/lists_user_search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="ListsUserSearch">
     <div class="input-wrap">
       <div class="input-search">
         <FAIcon
@@ -29,17 +29,19 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.input-wrap {
-  display: flex;
-  margin: 0.7em 0.5em 0.7em 0.5em;
+.ListsUserSearch {
+  .input-wrap {
+    display: flex;
+    margin: 0.7em 0.5em 0.7em 0.5em;
 
-  input {
-    width: 100%;
+    input {
+      width: 100%;
+    }
+  }
+
+  .search-icon {
+    margin-right: 0.3em;
   }
 }
 
-.search-icon {
-  margin-right: 0.3em;
-}
-
 </style>