From 1099892378584acf996d2b8fff58834a6bf64f78 Mon Sep 17 00:00:00 2001
From: morethanwords <thanwords24@gmail.com>
Date: Tue, 12 Jan 2021 14:33:19 +0400
Subject: [PATCH] Preloader: wait progress transition complete Fix groupping
 discussion start bubble

---
 src/components/chat/bubbles.ts            | 16 ++++++++++++----
 src/components/preloader.ts               |  9 ++++++++-
 src/lib/appManagers/appMessagesManager.ts |  3 +++
 src/scss/partials/_preloader.scss         |  6 ++++--
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts
index d297f135..eda973af 100644
--- a/src/components/chat/bubbles.ts
+++ b/src/components/chat/bubbles.ts
@@ -1599,7 +1599,12 @@ export default class ChatBubbles {
 
       if(updatePosition) {
         this.renderMessagesQueue(message, bubble, reverse, loadPromises);
-        this.bubbleGroups.addBubble(bubble, message, reverse);
+
+        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) {
-      this.bubbleGroups.addBubble(bubble, message, reverse);
+      if(!isThreadStarter) {
+        this.bubbleGroups.addBubble(bubble, message, reverse);
+      }
 
       this.renderMessagesQueue(message, bubble, reverse, loadPromises);
     } else {
diff --git a/src/components/preloader.ts b/src/components/preloader.ts
index 18ce8a7d..1607faa2 100644
--- a/src/components/preloader.ts
+++ b/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.detach();
         this.promise = promise = null;
       }
     };
diff --git a/src/lib/appManagers/appMessagesManager.ts b/src/lib/appManagers/appMessagesManager.ts
index b16e1a91..44f5f7e7 100644
--- a/src/lib/appManagers/appMessagesManager.ts
+++ b/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,
diff --git a/src/scss/partials/_preloader.scss b/src/scss/partials/_preloader.scss
index 3514a06b..ed15a162 100644
--- a/src/scss/partials/_preloader.scss
+++ b/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;