From 81f12ddb2f354b18aab619e930403acbd8e05505 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Mon, 31 May 2021 17:22:59 +0300
Subject: [PATCH] Message List: Improve scroll notch

---
 src/components/middle/MessageScroll.tsx | 14 +++++---------
 src/components/middle/MiddleColumn.scss |  2 +-
 src/util/fastSmoothScroll.ts            |  2 +-
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/middle/MessageScroll.tsx b/src/components/middle/MessageScroll.tsx
index 89f40f4f..ebe34d5d 100644
--- a/src/components/middle/MessageScroll.tsx
+++ b/src/components/middle/MessageScroll.tsx
@@ -49,7 +49,7 @@ const MessageScroll: FC<OwnProps> = ({
   // eslint-disable-next-line no-null/no-null
   const fabTriggerRef = useRef<HTMLDivElement>(null);
 
-  const updateFabVisibility = useCallback(() => {
+  const toggleScrollTools = useCallback(() => {
     if (isFabFrozen) {
       return;
     }
@@ -69,7 +69,7 @@ const MessageScroll: FC<OwnProps> = ({
     const { offsetHeight, scrollHeight, scrollTop } = containerRef.current!;
     const scrollBottom = scrollHeight - scrollTop - offsetHeight;
     const isNearBottom = scrollBottom <= FAB_THRESHOLD;
-    const isAtBottom = scrollBottom === 0 || (IS_SAFARI && scrollBottom === 1);
+    const isAtBottom = scrollBottom <= 0 || (IS_SAFARI && scrollBottom <= 1);
 
     onFabToggle(firstUnreadId ? !isAtBottom : !isNearBottom);
     onNotchToggle(!isAtBottom);
@@ -113,9 +113,7 @@ const MessageScroll: FC<OwnProps> = ({
   } = useIntersectionObserver({
     rootRef: containerRef,
     margin: FAB_THRESHOLD,
-  }, () => {
-    updateFabVisibility();
-  });
+  }, toggleScrollTools);
 
   useOnIntersect(fabTriggerRef, observeIntersectionForFab);
 
@@ -123,9 +121,7 @@ const MessageScroll: FC<OwnProps> = ({
     observe: observeIntersectionForNotch,
   } = useIntersectionObserver({
     rootRef: containerRef,
-  }, () => {
-    updateFabVisibility();
-  });
+  }, toggleScrollTools);
 
   useOnIntersect(fabTriggerRef, observeIntersectionForNotch);
 
@@ -150,7 +146,7 @@ const MessageScroll: FC<OwnProps> = ({
   }, [messageIds]);
 
   // Workaround for stuck FAB when many unread messages
-  useEffect(updateFabVisibility, [firstUnreadId]);
+  useEffect(toggleScrollTools, [firstUnreadId]);
 
   return (
     <div className={className} teactFastList>
diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss
index fe811683..58d747be 100644
--- a/src/components/middle/MiddleColumn.scss
+++ b/src/components/middle/MiddleColumn.scss
@@ -265,7 +265,7 @@
       height: 1px;
       background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 2%, rgba(255, 255, 255, 0.4) 98%, rgba(255, 255, 255, 0) 100%);
       opacity: 0;
-      transition: opacity 200ms ease;
+      transition: opacity 150ms ease;
 
       @media (max-width: 600px) {
         left: -2%;
diff --git a/src/util/fastSmoothScroll.ts b/src/util/fastSmoothScroll.ts
index 87aa3455..cf2a899b 100644
--- a/src/util/fastSmoothScroll.ts
+++ b/src/util/fastSmoothScroll.ts
@@ -44,7 +44,6 @@ export default function fastSmoothScroll(
 
   isAnimating = true;
   fastRaf(() => {
-    dispatchHeavyAnimationEvent(MAX_JS_DURATION);
     scrollWithJs(container, element, position, margin, forceDuration, forceCurrentContainerHeight);
   });
 }
@@ -99,6 +98,7 @@ function scrollWithJs(
   );
   const startAt = Date.now();
 
+  dispatchHeavyAnimationEvent(duration);
   animateSingle(() => {
     const t = Math.min((Date.now() - startAt) / duration, 1);