Preloader: wait progress transition complete

Fix groupping discussion start bubble

src/components/chat/bubbles.ts

@@ -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 {
       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 {
     
     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 {

src/components/preloader.ts

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

src/lib/appManagers/appMessagesManager.ts

@@ -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,

src/scss/partials/_preloader.scss

@@ -1,3 +1,5 @@
+$transition: .2s ease-in-out;
+
 .preloader {
   &-circular {
     animation: rotate 2s linear infinite;
@@ -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 @@
   .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;