Browse Source

Preloader: wait progress transition complete

Fix groupping discussion start bubble
master
morethanwords 4 years ago
parent
commit
1099892378
  1. 12
      src/components/chat/bubbles.ts
  2. 9
      src/components/preloader.ts
  3. 3
      src/lib/appManagers/appMessagesManager.ts
  4. 6
      src/scss/partials/_preloader.scss

12
src/components/chat/bubbles.ts

@ -1599,7 +1599,12 @@ export default class ChatBubbles { @@ -1599,7 +1599,12 @@ export default class ChatBubbles {
if(updatePosition) {
this.renderMessagesQueue(message, bubble, reverse, loadPromises);
if(!message.pFlags.is_single) { // * Ignore 'Discussion started'
this.bubbleGroups.addBubble(bubble, message, reverse);
} else {
bubble.classList.add('is-group-last');
}
}
return bubble;
@ -2215,8 +2220,9 @@ export default class ChatBubbles { @@ -2215,8 +2220,9 @@ export default class ChatBubbles {
savedFrom = `${this.chat.peerId}_${message.mid}`;
}
if(messageWithReplies && messageWithReplies.mid === this.chat.threadId) {
bubble.classList.add('is-thread-starter');
const isThreadStarter = messageWithReplies && messageWithReplies.mid === this.chat.threadId;
if(isThreadStarter) {
bubble.classList.add('is-thread-starter', 'is-group-last');
}
if(savedFrom && this.peerId !== REPLIES_PEER_ID) {
@ -2229,7 +2235,9 @@ export default class ChatBubbles { @@ -2229,7 +2235,9 @@ export default class ChatBubbles {
bubble.classList.add(isOut ? 'is-out' : 'is-in');
if(updatePosition) {
if(!isThreadStarter) {
this.bubbleGroups.addBubble(bubble, message, reverse);
}
this.renderMessagesQueue(message, bubble, reverse, loadPromises);
} else {

9
src/components/preloader.ts

@ -71,9 +71,16 @@ export default class ProgressivePreloader { @@ -71,9 +71,16 @@ export default class ProgressivePreloader {
if(tempId === this.tempId) {
if(successfully) {
this.setProgress(100);
}
setTimeout(() => { // * wait for transition complete
if(tempId === this.tempId) {
this.detach();
}
}, TRANSITION_TIME * 1.25);
} else {
this.detach();
}
this.promise = promise = null;
}
};

3
src/lib/appManagers/appMessagesManager.ts

@ -3213,6 +3213,9 @@ export class AppMessagesManager { @@ -3213,6 +3213,9 @@ export class AppMessagesManager {
const serviceStartMessage: Message.messageService = {
_: 'messageService',
pFlags: {
is_single: true
} as any,
id: this.generateMessageId(message.id, true),
date: message.date,
from_id: message.from_id,

6
src/scss/partials/_preloader.scss

@ -1,3 +1,5 @@ @@ -1,3 +1,5 @@
$transition: .2s ease-in-out;
.preloader {
&-circular {
animation: rotate 2s linear infinite;
@ -37,7 +39,7 @@ @@ -37,7 +39,7 @@
transform: scale(0);
body:not(.animation-level-0) & {
transition: opacity .2s ease-in-out, transform .2s ease-in-out;
transition: opacity $transition, transform $transition;
}
&.is-visible {
@ -68,7 +70,7 @@ @@ -68,7 +70,7 @@
.preloader-path-new {
stroke-dasharray: 5, 149.82;
stroke-dashoffset: 0;
transition: stroke-dasharray 400ms ease-in-out;
transition: stroke-dasharray $transition;
stroke-linecap: round;
stroke: white;
stroke-width: 2;

Loading…
Cancel
Save