fix(MessagesList): position loading spinner to not interfere with scr…

…olling

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

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);
  }
 }