Show loading view while loading deleted objects

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

src/components/AppNavigation/CalendarList/Trashbin.vue

@@ -29,8 +29,24 @@
 				@close="showModal = false">
 				<div class="modal__content">
 					<h2>{{ t('calendar', 'Trash bin') }}</h2>
-					<span v-if="!items.length">{{ t('calendar', 'You do not have any deleted calendars or events') }}</span>
-					<table v-else>
+					<EmptyContent
+						v-if="loading"
+						icon="icon-loading"
+						class="modal__content__loading">
+						<template #desc>
+							{{ t('calendar', 'Loading deleted elements.') }}
+						</template>
+					</EmptyContent>
+					<EmptyContent
+						v-else-if="!items.length"
+						class="modal__content__empty"
+						icon="icon-delete">
+						<template #desc>
+							{{ t('calendar', 'You do not have any deleted elements.') }}
+						</template>
+					</EmptyContent>
+					<template v-else>
+						<table>
 							<tr>
 								<th class="name">
 									{{ t('calendar', 'Name') }}
@@ -78,6 +94,7 @@
 						<p v-if="retentionDuration" class="footer">
 							{{ n('calendar', 'Elements in the trash bin are deleted after {numDays} day', 'Elements in the trash bin are deleted after {numDays} days', retentionDuration, { numDays: retentionDuration }) }}
 						</p>
+					</template>
 				</div>
 			</Modal>
 		</template>
@@ -89,6 +106,7 @@ import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import Actions from '@nextcloud/vue/dist/Components/Actions'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import Modal from '@nextcloud/vue/dist/Components/Modal'
+import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 import moment from '@nextcloud/moment'
 import logger from '../../../utils/logger'
 import { showError } from '@nextcloud/dialogs'
@@ -100,6 +118,7 @@ export default {
 	name: 'Trashbin',
 	components: {
 		AppNavigationItem,
+		EmptyContent,
 		Modal,
 		Moment,
 		Actions,
@@ -108,6 +127,7 @@ export default {
 	data() {
 		return {
 			showModal: false,
+			loading: true,
 		}
 	},
 	computed: {
@@ -174,6 +194,7 @@ export default {
 		async onShow() {
 			this.showModal = true
 
+			this.loading = true
 			try {
 				await Promise.all([
 					this.$store.dispatch('loadDeletedCalendars'),
@@ -191,6 +212,7 @@ export default {
 
 				showError(t('calendar', 'Could not load deleted calendars and objects'))
 			}
+			this.loading = false
 		},
 		async onDeletePermanently(item) {
 			logger.debug('deleting ' + item.url + ' permanently', item)
@@ -235,6 +257,11 @@ export default {
 .modal__content {
 	max-width: 40vw;
 	margin: 2vw;
+
+	&__loading,
+	&__empty {
+		margin-top: 25px !important;
+	}
 }
 ::v-deep .modal-wrapper .modal-container {
 	overflow-y: auto;