Skip to content

Commit 8823529

Browse files
committed
(UX) fix infinite messages jumpy scroll
1 parent ae7ebe2 commit 8823529

File tree

1 file changed

+10
-0
lines changed

1 file changed

+10
-0
lines changed

src/ChatWindow/Room.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,10 @@
104104
<transition name="vac-fade-message">
105105
<infinite-loading
106106
v-if="messages.length"
107+
:class="{ 'vac-infinite-loading': !messagesLoaded }"
107108
spinner="spiral"
108109
direction="top"
110+
:distance="0"
109111
@infinite="loadMoreMessages"
110112
>
111113
<div slot="spinner">
@@ -910,6 +912,10 @@ export default {
910912
margin-bottom: 20px;
911913
}
912914
915+
.vac-infinite-loading {
916+
height: 68px;
917+
}
918+
913919
.vac-icon-scroll {
914920
position: absolute;
915921
bottom: 80px;
@@ -1177,6 +1183,10 @@ export default {
11771183
margin-top: 50px;
11781184
}
11791185
1186+
.vac-infinite-loading {
1187+
height: 58px;
1188+
}
1189+
11801190
.vac-box-footer {
11811191
border-top: var(--chat-border-style-input);
11821192
padding: 7px 2px 7px 7px;

0 commit comments

Comments
 (0)