From 0c0a82cef7256cc2ac1c036a57c539d65ec267b4 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Mon, 15 Apr 2024 15:16:50 +0200
Subject: [PATCH] fix(MessagesList): fix jumping and inconsistent scrolling of
 chat because of widget and references loading

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 src/components/MessagesList/MessagesList.vue | 47 +++++++++++---------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 3f1d1d768a9..b655782f7ef 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -35,25 +35,28 @@
 			<ul v-if="displayMessagesLoader" class="scroller__loading icon-loading" />
 		</TransitionWrapper>
 
-		<ul v-for="(list, dateTimestamp) in messagesGroupedByDateByAuthor"
-			:key="`section_${dateTimestamp}`"
-			:ref="`dateGroup-${token}`"
-			:data-date-timestamp="dateTimestamp"
-			:class="{'has-sticky': dateTimestamp === stickyDate}">
-			<li class="messages-group__date">
-				<span class="messages-group__date-text" role="heading" aria-level="3">
-					{{ dateSeparatorLabels[dateTimestamp] }}
-				</span>
-			</li>
-			<component :is="messagesGroupComponent(group)"
-				v-for="group in list"
-				:key="group.id"
-				class="messages-group"
-				:token="token"
-				:messages="group.messages"
-				:previous-message-id="group.previousMessageId"
-				:next-message-id="group.nextMessageId" />
-		</ul>
+		<div class="messages-list-wrapper__reversed">
+			<ul v-for="[dateTimestamp, list] in Object.entries(messagesGroupedByDateByAuthor).reverse()"
+				:key="`section_${dateTimestamp}`"
+				:ref="`dateGroup-${token}`"
+				:data-date-timestamp="dateTimestamp"
+				:class="{'has-sticky': dateTimestamp === stickyDate}">
+				<li class="messages-group__date">
+					<span class="messages-group__date-text" role="heading" aria-level="3">
+						{{ dateSeparatorLabels[dateTimestamp] }}
+					</span>
+				</li>
+				<component :is="messagesGroupComponent(group)"
+					v-for="group in list"
+					:key="group.id"
+					ref="messagesGroup"
+					class="messages-group"
+					:token="token"
+					:messages="group.messages"
+					:previous-message-id="group.previousMessageId"
+					:next-message-id="group.nextMessageId" />
+			</ul>
+		</div>
 
 		<template v-if="showLoadingAnimation">
 			<LoadingPlaceholder type="messages"
@@ -78,7 +81,6 @@ import uniqueId from 'lodash/uniqueId.js'
 import Message from 'vue-material-design-icons/Message.vue'
 
 import Axios from '@nextcloud/axios'
-import { getCapabilities } from '@nextcloud/capabilities'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import moment from '@nextcloud/moment'
 
@@ -1255,6 +1257,11 @@ export default {
 	}
 }
 
+.messages-list-wrapper__reversed {
+	display: flex;
+	flex-direction: column-reverse;
+}
+
 .messages-group {
 	&__date {
 		position: sticky;