Fix rendering chatlist placeholder

src/components/chat/gradientRenderer.ts

@@ -6,6 +6,8 @@
 
 import {animateSingle} from '../../helpers/animation';
 import {hexToRgb} from '../../helpers/color';
+import {easeOutCubicApply} from '../../helpers/easing/easeOutCubic';
+import {easeOutQuadApply} from '../../helpers/easing/easeOutQuad';
 
 const WIDTH = 50;
 const HEIGHT = WIDTH;
@@ -165,8 +167,9 @@ export default class ChatBackgroundGradientRenderer {
     if(getProgress) {
       const value = getProgress();
       done = value >= 1;
+      const transitionValue = easeOutQuadApply(value, 1);
       const nextPositionTail = this._nextPositionTail ?? 0;
-      const tail = this._nextPositionTail = this._nextPositionTails * value;
+      const tail = this._nextPositionTail = this._nextPositionTails * transitionValue;
       const diff = tail - nextPositionTail;
       if(diff) {
         this._nextPositionLeft -= diff;

src/helpers/easing/easeInOutSine.ts

@@ -1,4 +1,8 @@
 // https://spicyyoghurt.com/tools/easing-functions
 export default function easeInOutSine(t: number, b: number, c: number, d: number) {
-  return t >= d ? b + c : -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
+  return t >= d ? b + c : easeInOutSineApply(t / d, c) + b;
+}
+
+export function easeInOutSineApply(v: number, c: number) {
+  return -c / 2 * (Math.cos(Math.PI * v) - 1);
 }

src/helpers/easing/easeOutCirc.ts

@@ -1,3 +1,7 @@
 export default function easeOutCirc(t: number, b: number, c: number, d: number) {
-  return t >= d ? b + c : c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
+  return t >= d ? b + c : easeOutCircApply(t / d, c) + b;
+}
+
+export function easeOutCircApply(v: number, c: number) {
+  return c * Math.sqrt(1 - --v * v);
 }

src/helpers/easing/easeOutCubic.ts

@@ -0,0 +1,7 @@
+export default function easeOutCubic(t: number, b: number, c: number, d: number) {
+  return t >= d ? b + c : easeOutCubicApply(t / d, c) + b;
+}
+
+export function easeOutCubicApply(v: number, c: number) {
+  return c * (--v * v * v + 1);
+}

src/helpers/easing/easeOutExpo.ts

@@ -1,4 +1,8 @@
 // https://spicyyoghurt.com/tools/easing-functions
 export default function easeOutExpo(t: number, b: number, c: number, d: number) {
-  return t >= d ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
+  return t >= d ? b + c : easeOutExpoApply(t / d, c) + b;
+}
+
+export function easeOutExpoApply(v: number, c: number) {
+  return c * (-Math.pow(2, -10 * v) + 1);
 }

src/helpers/easing/easeOutQuad.ts

@@ -0,0 +1,7 @@
+export default function easeOutQuad(t: number, b: number, c: number, d: number) {
+  return t >= d ? b + c : easeOutQuadApply(t / d, c) + b;
+}
+
+export function easeOutQuadApply(v: number, c: number) {
+  return -c * v * (v - 2);
+}

src/helpers/fastSmoothScroll.ts

@@ -244,16 +244,14 @@ function scrollWithJs(options: ScrollOptions): Promise<void> {
   */
 
   const transition = absPath < SHORT_TRANSITION_MAX_DISTANCE ? shortTransition : longTransition;
-  const getProgress = () => {
-    const t = duration ? Math.min((Date.now() - startAt) / duration, 1) : 1;
-    return transition(t);
-  };
+  const getProgress = () => duration ? Math.min((Date.now() - startAt) / duration, 1) : 1;
   const tick = () => {
-    const value = getProgress();
+    const t = getProgress();
+    const value = transition(t);
     const currentPath = path * (1 - value);
     container[scrollPositionKey] = Math.round(target - currentPath);
 
-    return value < 1;
+    return t < 1;
   };
 
   if(!duration || !path) {

src/lib/appManagers/appDialogsManager.ts

@@ -234,6 +234,8 @@ export class AppDialogsManager {
   private managers: AppManagers;
   private selectTab: ReturnType<typeof horizontalMenu>;
 
+  private doNotRenderChatList: boolean;
+
   public start() {
     const managers = this.managers = getProxiedManagers();
 
@@ -695,13 +697,20 @@ export class AppDialogsManager {
       addFiltersPromise = this.managers.filtersStorage.getDialogFilters().then(addFilters);
     }
 
+    this.doNotRenderChatList = true;
     const loadDialogsPromise = this.onChatsScroll();
     await loadDialogsPromise;
-    this.loadDialogsRenderPromise = undefined;
+
+    // show the placeholder before the filters, and then will reset to the default tab again
+    if(!haveFilters) {
+      this.selectTab(0, false);
+    }
 
     addFiltersPromise && await addFiltersPromise;
     // this.folders.menu.children[0].classList.add('active');
 
+    this.doNotRenderChatList = undefined;
+
     this.filterId = -1;
     this.selectTab(0, false);
 
@@ -1036,7 +1045,7 @@ export class AppDialogsManager {
 
         const a = await getConversationsResult;
         const result = await a.result;
-        if(this.loadDialogsRenderPromise !== renderPromise) {
+        if(this.loadDialogsRenderPromise !== renderPromise || this.doNotRenderChatList) {
           reject();
           cachedInfoPromise.reject();
           return;