Added loading and empty state to experience list

app/imports/ui/creature/experiences/ExperienceForm.vue

@@ -21,6 +21,7 @@
         type="number"
         class="base-value-field text-xs-center large-format no-flex"
         suffix="XP"
+        autofocus
         :value="model.xp"
         :error-messages="errors.xp"
         @change="change('xp', ...arguments)"
@@ -28,6 +29,7 @@
     </div>
     <text-field
       label="Name"
+      :autofocus="milestone"
       :value="model.name"
       :error-messages="errors.name"
       @change="change('name', ...arguments)"

app/imports/ui/creature/experiences/ExperienceListDialog.vue

@@ -21,7 +21,27 @@
         <v-icon>refresh</v-icon>
       </v-btn>
     </template>
-    <v-list>
+    <div
+      v-if="!$subReady.experiences"
+      class="layout column align-center justify-center fill-height"
+    >
+      <v-progress-circular
+        indeterminate
+        size="240"
+      />
+    </div>
+    <div
+      v-else-if="experiences.length === 0"
+      class="layout column align-center justify-center fill-height"
+    >
+      <v-icon style="font-size: 240px; width: 240px; height: 240px;">
+        $vuetify.icons.baby_face
+      </v-icon>
+      <p class="headline">
+        No experiences
+      </p>
+    </div>
+    <v-list v-else>
       <v-slide-x-transition
         group
         mode="out"