From c27d8a4d6803e699b11bf5cfab1b4ef6c3eacfa1 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 30 Jul 2024 20:44:40 +0200
Subject: [PATCH] fix(MessagesList): position loading spinner to not interfere
 with scrolling

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/MessagesList/MessagesList.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 1b5c431d6fa..0ef181e4f4d 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -14,7 +14,7 @@
 		@scroll="onScroll"
 		@scrollend="endScroll">
 		<TransitionWrapper name="fade">
-			<ul v-if="displayMessagesLoader" class="scroller__loading icon-loading" />
+			<NcLoadingIcon v-if="displayMessagesLoader" class="scroller__loading" :size="32" />
 		</TransitionWrapper>
 
 		<ul v-for="(list, dateTimestamp) in messagesGroupedByDateByAuthor"
@@ -67,6 +67,7 @@ import { t, n } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
 import MessagesGroup from './MessagesGroup/MessagesGroup.vue'
 import MessagesSystemGroup from './MessagesGroup/MessagesSystemGroup.vue'
@@ -84,6 +85,7 @@ export default {
 		LoadingPlaceholder,
 		Message,
 		NcEmptyContent,
+		NcLoadingIcon,
 		TransitionWrapper
 	},
 
@@ -886,9 +888,9 @@ export default {
 				this.displayMessagesLoader = false
 
 				if (this.$refs.scroller.scrollHeight !== scrollHeight) {
-					// scroll to previous position + added height - loading spinner height
+					// scroll to previous position + added height
 					this.$refs.scroller.scrollTo({
-						top: scrollTop + (this.$refs.scroller.scrollHeight - scrollHeight) - 40,
+						top: scrollTop + (this.$refs.scroller.scrollHeight - scrollHeight),
 					})
 				}
 			}
@@ -1245,7 +1247,7 @@ export default {
 .scroller {
 	position: relative;
 	flex: 1 0;
-	padding-top: 20px;
+	padding-top: var(--default-grid-baseline);
 	overflow-y: scroll;
 	overflow-x: hidden;
 	border-bottom: 1px solid var(--color-border);
@@ -1261,8 +1263,9 @@ export default {
 	}
 
 	&__loading {
-		height: 40px;
-		transform: translatex(-64px);
+		position: absolute;
+		top: var(--default-grid-baseline);
+		left: var(--chat-spacing, 8px);
 	}
 }