Revert 3f4901df

src/components/middle/MessageList.tsx

@@ -53,7 +53,6 @@ import fastSmoothScroll, { isAnimatingScroll } from '../../util/fastSmoothScroll
 import renderText from '../common/helpers/renderText';
 import useLang, { LangFn } from '../../hooks/useLang';
 import useWindowSize from '../../hooks/useWindowSize';
-import useBackgroundMode from '../../hooks/useBackgroundMode';
 
 import Loading from '../ui/Loading';
 import MessageScroll from './MessageScroll';
@@ -226,8 +225,6 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
     }
   });
 
-  useBackgroundMode(freezeForReading, unfreezeForReading);
-
   useOnChange(() => {
     memoFocusingIdRef.current = focusingId;
 

src/components/middle/MessageScroll.tsx

@@ -1,5 +1,7 @@
 import { MutableRefObject } from 'react';
-import React, { FC, useCallback, useRef } from '../../lib/teact/teact';
+import React, {
+  FC, useCallback, useEffect, useRef,
+} from '../../lib/teact/teact';
 
 import { MESSAGE_LIST_SENSITIVE_AREA } from '../../config';
 import resetScroll from '../../util/resetScroll';
@@ -21,7 +23,10 @@ type OwnProps = {
 };
 
 const FAB_THRESHOLD = 50;
-const TOOLS_FREEZE_TIMEOUT = 1000;
+const TOOLS_FREEZE_TIMEOUT = 100;
+
+// Local flag is used because `freeze/unfreeze` methods are controlled by heavy animation
+let areToolsFrozen = false;
 
 const MessageScroll: FC<OwnProps> = ({
   containerRef,
@@ -44,6 +49,10 @@ const MessageScroll: FC<OwnProps> = ({
   const fabTriggerRef = useRef<HTMLDivElement>(null);
 
   const toggleScrollTools = useCallback(() => {
+    if (areToolsFrozen) {
+      return;
+    }
+
     if (!messageIds || !messageIds.length) {
       onFabToggle(false);
       onNotchToggle(false);
@@ -109,33 +118,35 @@ const MessageScroll: FC<OwnProps> = ({
 
   const {
     observe: observeIntersectionForNotch,
-    freeze: freezeForNotch,
-    unfreeze: unfreezeForNotch,
   } = useIntersectionObserver({
     rootRef: containerRef,
   }, toggleScrollTools);
 
   useOnIntersect(fabTriggerRef, observeIntersectionForNotch);
 
+  // Do not load more and show FAB when focusing
   useOnChange(() => {
     if (focusingId) {
       freezeForLoadMore();
+      freezeForFab();
     } else {
+      unfreezeForFab();
       unfreezeForLoadMore();
     }
   }, [focusingId]);
 
   // Workaround for FAB and notch flickering with tall incoming message
   useOnChange(() => {
-    freezeForFab();
-    freezeForNotch();
+    areToolsFrozen = true;
 
     setTimeout(() => {
-      unfreezeForNotch();
-      unfreezeForFab();
+      areToolsFrozen = false;
     }, TOOLS_FREEZE_TIMEOUT);
   }, [messageIds]);
 
+  // Workaround for stuck FAB when many unread messages
+  useEffect(toggleScrollTools, [firstUnreadId]);
+
   return (
     <div className={className} teactFastList>
       <div ref={backwardsTriggerRef} key="backwards-trigger" className="backwards-trigger" />

src/hooks/useIntersectionObserver.ts

@@ -41,23 +41,19 @@ export function useIntersectionObserver({
 }, rootCallback?: RootCallback): Response {
   const controllerRef = useRef<IntersectionController>();
   const rootCallbackRef = useRef<RootCallback>();
-  const freezeFlagsRef = useRef(0);
+  const isFrozenRef = useRef<boolean>();
   const onUnfreezeRef = useRef<NoneToVoidFunction>();
 
   rootCallbackRef.current = rootCallback;
 
   const freeze = useCallback(() => {
-    freezeFlagsRef.current++;
+    isFrozenRef.current = true;
   }, []);
 
   const unfreeze = useCallback(() => {
-    if (!freezeFlagsRef.current) {
-      return;
-    }
+    isFrozenRef.current = false;
 
-    freezeFlagsRef.current--;
-
-    if (!freezeFlagsRef.current && onUnfreezeRef.current) {
+    if (onUnfreezeRef.current) {
       onUnfreezeRef.current();
       onUnfreezeRef.current = undefined;
     }
@@ -108,7 +104,7 @@ export function useIntersectionObserver({
           entriesAccumulator.set(entry.target, entry);
         });
 
-        if (freezeFlagsRef.current) {
+        if (isFrozenRef.current) {
           onUnfreezeRef.current = () => {
             observerCallback();
           };