Merge pull request #6304 from nextcloud/fix/6205/center-loading-indic…

…ator Fix alignment of mailbox loading indicator
nextcloud · Apr 27, 2022 · ef0c005 · ef0c005
2 parents c4ecde1 + 1f4c794
commit ef0c005
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
@@ -1,12 +1,14 @@
 <template>
-	<div v-if="hint" class="emptycontent">
-		<a class="icon-loading" />
-		<h2>{{ hint }}</h2>
-		<transition name="fade">
-			<em v-if="slowHint && slow">{{ slowHint }}</em>
-		</transition>
+	<div class="wrapper">
+		<div v-if="hint" class="emptycontent">
+			<a class="icon-loading" />
+			<h2>{{ hint }}</h2>
+			<transition name="fade">
+				<em v-if="slowHint && slow">{{ slowHint }}</em>
+			</transition>
+		</div>
+		<div v-else class="container icon-loading" />
 	</div>
-	<div v-else class="container icon-loading" />
 </template>
 
 <script>
@@ -52,4 +54,11 @@ export default {
 .fade-leave-to {
 	opacity: 0;
 }
+
+.wrapper {
+	display: flex;
+	justify-content: space-around;
+	flex-direction: column;
+	flex: 1 auto;
+}
 </style>
diff --git a/src/components/MailboxThread.vue b/src/components/MailboxThread.vue
@@ -238,6 +238,11 @@ export default {
 	padding: 16px;
 }
 
+.app-content-list {
+	// Required for centering the loading indicator
+	display: flex;
+}
+
 .app-content-list-item:hover {
 	background: transparent;
 }