Improved slot UI look and feel

app/imports/ui/creature/character/CharacterSheet.vue

@@ -50,7 +50,7 @@
             <spells-tab :creature-id="creatureId" />
           </v-tab-item>
           <v-tab-item>
-            <persona-tab :creature-id="creatureId" />
+            <character-tab :creature-id="creatureId" />
           </v-tab-item>
           <v-tab-item>
             <tree-tab :creature-id="creatureId" />

app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue

@@ -22,7 +22,7 @@
       </div>
       <div>
         <v-card>
-          <v-card-text>
+          <v-card-text style="background-color: inherit;">
             <slots :creature-id="creatureId" />
           </v-card-text>
         </v-card>

app/imports/ui/creature/slots/SlotFillDialog.vue

@@ -6,25 +6,38 @@
       </v-toolbar-title>
     </template>
     <div class="library-nodes">
-      <v-list>
-        <v-list-tile
-          v-for="node in libraryNodes"
-          :key="node._id"
-          :class="node._id === (selectedNode && selectedNode._id) && 'primary--text'"
-          @click="selectedNode = node"
+      <v-fade-transition mode="out-in">
+        <v-list v-if="$subReady.slotFillers">
+          <v-list-tile
+            v-for="node in libraryNodes"
+            :key="node._id"
+            :class="node._id === (selectedNode && selectedNode._id) && 'primary--text'"
+            @click="selectedNode = node"
+          >
+            <tree-node-view
+              :model="node"
+              :selected="node._id === (selectedNode && selectedNode._id)"
+            />
+          </v-list-tile>
+        </v-list>
+        <h4
+          v-else-if="$subReady.slotFillers"
+          class="ma-4"
         >
-          <tree-node-view
-            :model="node"
-            :selected="node._id === (selectedNode && selectedNode._id)"
+          Nothing suitable was found in your libraries
+        </h4>
+        <div
+          v-else
+          key="character-loading"
+          class="fill-height layout justify-center align-center"
+        >
+          <v-progress-circular
+            indeterminate
+            color="primary"
+            size="64"
           />
-        </v-list-tile>
-      </v-list>
-      <h4
-        v-if="!libraryNodes.length"
-        class="ma-4"
-      >
-        Nothing suitable was found in your libraries
-      </h4>
+        </div>
+      </v-fade-transition>
     </div>
     <template slot="actions">
       <v-spacer />

app/imports/ui/creature/slots/Slots.vue

@@ -36,6 +36,7 @@
         v-if="slot.quantityExpected > slot.children.length"
         icon
         :data-id="`slot-add-button-${slot._id}`"
+        style="background-color: inherit;"
         @click="fillSlot(slot._id)"
       >
         <v-icon>add</v-icon>
@@ -112,4 +113,7 @@ export default {
 </script>
 
 <style lang="css" scoped>
+  div {
+    background-color: inherit;
+  }
 </style>