From 528e76d979d1288fba3648df86f5a8dccec04bda Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Mon, 14 Jun 2021 09:52:54 +0300 Subject: [PATCH] Revert 3f4901df --- src/components/middle/MessageList.tsx | 3 --- src/components/middle/MessageScroll.tsx | 27 +++++++++++++++++-------- src/hooks/useIntersectionObserver.ts | 14 +++++-------- 3 files changed, 24 insertions(+), 20 deletions(-) diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx index 2ece2f31..3a6afcef 100644 --- a/src/components/middle/MessageList.tsx +++ b/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 = ({ } }); - useBackgroundMode(freezeForReading, unfreezeForReading); - useOnChange(() => { memoFocusingIdRef.current = focusingId; diff --git a/src/components/middle/MessageScroll.tsx b/src/components/middle/MessageScroll.tsx index 5497edb6..250c7f49 100644 --- a/src/components/middle/MessageScroll.tsx +++ b/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 = ({ containerRef, @@ -44,6 +49,10 @@ const MessageScroll: FC = ({ const fabTriggerRef = useRef(null); const toggleScrollTools = useCallback(() => { + if (areToolsFrozen) { + return; + } + if (!messageIds || !messageIds.length) { onFabToggle(false); onNotchToggle(false); @@ -109,33 +118,35 @@ const MessageScroll: FC = ({ 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 (
diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts index 8bb94095..42cc5045 100644 --- a/src/hooks/useIntersectionObserver.ts +++ b/src/hooks/useIntersectionObserver.ts @@ -41,23 +41,19 @@ export function useIntersectionObserver({ }, rootCallback?: RootCallback): Response { const controllerRef = useRef(); const rootCallbackRef = useRef(); - const freezeFlagsRef = useRef(0); + const isFrozenRef = useRef(); const onUnfreezeRef = useRef(); 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(); };