Syncing stashes on actor merge, improved merge dialog feedback.

components/actors/merge.vue

@@ -58,7 +58,10 @@
 			</template>
 
 			<div class="dialog-actions">
+				<Ellipsis v-if="submitted" />
+
 				<button
+					v-else
 					type="submit"
 					class="button button-primary"
 					:disabled="!targetActor"
@@ -73,6 +76,7 @@
 import { ref, onMounted } from 'vue';
 
 import Dialog from '#/components/dialog/dialog.vue';
+import Ellipsis from '#/components/loading/ellipsis.vue';
 
 import { get, post } from '#/src/api.js';
 
@@ -89,6 +93,7 @@ const targetActor = ref(null);
 const actorInput = ref(null);
 const actorQuery = ref('');
 const actorResults = ref([]);
+const submitted = ref(false);
 
 async function searchActors() {
 	const res = await get('/actors', {
@@ -101,12 +106,16 @@ async function searchActors() {
 }
 
 async function merge() {
+	submitted.value = true;
+
 	await post(`/actors/${targetActor.value.id}/merge/${props.actor.id}`, null, {
 		successFeedback: `Merged ${props.actor.entity ? `${props.actor.name} (${props.actor.entity.name})` : props.actor.name} into ${targetActor.value.name}`,
 		errorFeedback: `Failed to merge ${props.actor.entity ? `${props.actor.name} (${props.actor.entity.name})` : props.actor.name} into ${targetActor.value.name}`,
 		appendErrorMessage: true,
 	});
 
+	submitted.value = false;
+
 	emit('close');
 }
 
@@ -183,4 +192,13 @@ onMounted(() => {
 	font-family: monospace;
 	font-size: 1rem;
 }
+
+.load-container {
+	height: 2rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 0 1rem;
+}
 </style>