1 files changed, 26 insertions, 12 deletions
diff --git a/core/src/components/AccountMenu/AccountMenuEntry.vue b/core/src/components/AccountMenu/AccountMenuEntry.vue
index 47db84a7d33..d983226d273 100644
--- a/core/src/components/AccountMenu/AccountMenuEntry.vue
+++ b/core/src/components/AccountMenu/AccountMenuEntry.vue
@@ -11,28 +11,30 @@
 		compact
 		:href="href"
 		:name="name"
-		target="_self">
+		target="_self"
+		@click="onClick">
 		<template #icon>
-			<img class="account-menu-entry__icon"
+			<NcLoadingIcon v-if="loading" :size="20" class="account-menu-entry__loading" />
+			<slot v-else-if="$scopedSlots.icon" name="icon" />
+			<img v-else
+				class="account-menu-entry__icon"
 				:class="{ 'account-menu-entry__icon--active': active }"
 				:src="iconSource"
 				alt="">
 		</template>
-		<template v-if="loading" #indicator>
-			<NcLoadingIcon />
-		</template>
 	</NcListItem>
 </template>
 
-<script>
+<script lang="ts">
 import { loadState } from '@nextcloud/initial-state'
+import { defineComponent } from 'vue'
 
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 
 const versionHash = loadState('core', 'versionHash', '')
 
-export default {
+export default defineComponent({
 	name: 'AccountMenuEntry',
 
 	components: {
@@ -55,11 +57,11 @@ export default {
 		},
 		active: {
 			type: Boolean,
-			required: true,
+			default: false,
 		},
 		icon: {
 			type: String,
-			required: true,
+			default: '',
 		},
 	},
 
@@ -76,11 +78,17 @@ export default {
 	},
 
 	methods: {
-		handleClick() {
-			this.loading = true
+		onClick(e: MouseEvent) {
+			this.$emit('click', e)
+
+			// Allow to not show the loading indicator
+			// in case the click event was already handled
+			if (!e.defaultPrevented) {
+				this.loading = true
+			}
 		},
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -96,6 +104,12 @@ export default {
 		}
 	}
 
+	&__loading {
+		height: 20px;
+		width: 20px;
+		margin: calc((var(--default-clickable-area) - 20px) / 2); // 20px icon size
+	}
+
 	:deep(.list-item-content__main) {
 		width: fit-content;
 	}