From e86ee7bcdf117f57b2f9cb1f30ece9dd0a6d7587 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Sun, 19 Mar 2023 22:31:38 -0500
Subject: [PATCH] Forum Panel: Fix blinking general topic when switching forums
 (#2815)

---
 src/components/left/main/ChatList.tsx                      | 4 ++--
 src/components/left/main/ForumPanel.tsx                    | 4 ++--
 .../main/hooks/{useChatOrderDiff.ts => useOrderDiff.ts}    | 7 ++++---
 3 files changed, 8 insertions(+), 7 deletions(-)
 rename src/components/left/main/hooks/{useChatOrderDiff.ts => useOrderDiff.ts} (77%)

diff --git a/src/components/left/main/ChatList.tsx b/src/components/left/main/ChatList.tsx
index b070a41f7..51d341298 100644
--- a/src/components/left/main/ChatList.tsx
+++ b/src/components/left/main/ChatList.tsx
@@ -25,7 +25,7 @@ import { useFolderManagerForOrderedIds } from '../../../hooks/useFolderManager';
 import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver';
 import { useHotkeys } from '../../../hooks/useHotkeys';
 import useDebouncedCallback from '../../../hooks/useDebouncedCallback';
-import useChatOrderDiff from './hooks/useChatOrderDiff';
+import useOrderDiff from './hooks/useOrderDiff';
 
 import InfiniteScroll from '../../ui/InfiniteScroll';
 import Loading from '../../ui/Loading';
@@ -78,7 +78,7 @@ const ChatList: FC<OwnProps> = ({
   const archiveHeight = shouldDisplayArchive
     ? archiveSettings.isMinimized ? ARCHIVE_MINIMIZED_HEIGHT : CHAT_HEIGHT_PX : 0;
 
-  const { orderDiffById, getAnimationType } = useChatOrderDiff(orderedIds);
+  const { orderDiffById, getAnimationType } = useOrderDiff(orderedIds);
 
   const [viewportIds, getMore] = useInfiniteScroll(undefined, orderedIds, undefined, CHAT_LIST_SLICE);
 
diff --git a/src/components/left/main/ForumPanel.tsx b/src/components/left/main/ForumPanel.tsx
index 2ed144636..f84cde4f6 100644
--- a/src/components/left/main/ForumPanel.tsx
+++ b/src/components/left/main/ForumPanel.tsx
@@ -23,7 +23,7 @@ import { captureEvents, SwipeDirection } from '../../../util/captureEvents';
 
 import useInfiniteScroll from '../../../hooks/useInfiniteScroll';
 import { useIntersectionObserver, useOnIntersect } from '../../../hooks/useIntersectionObserver';
-import useChatOrderDiff from './hooks/useChatOrderDiff';
+import useOrderDiff from './hooks/useOrderDiff';
 import useLang from '../../../hooks/useLang';
 import usePrevious from '../../../hooks/usePrevious';
 import useHistoryBack from '../../../hooks/useHistoryBack';
@@ -119,7 +119,7 @@ const ForumPanel: FC<OwnProps & StateProps> = ({
       : [];
   }, [chat]);
 
-  const { orderDiffById, getAnimationType } = useChatOrderDiff(orderedIds);
+  const { orderDiffById, getAnimationType } = useOrderDiff(orderedIds, chat?.id);
 
   const [viewportIds, getMore] = useInfiniteScroll(() => {
     if (!chat || !lastSyncTime) return;
diff --git a/src/components/left/main/hooks/useChatOrderDiff.ts b/src/components/left/main/hooks/useOrderDiff.ts
similarity index 77%
rename from src/components/left/main/hooks/useChatOrderDiff.ts
rename to src/components/left/main/hooks/useOrderDiff.ts
index 3d8f7addb..dd647b899 100644
--- a/src/components/left/main/hooks/useChatOrderDiff.ts
+++ b/src/components/left/main/hooks/useOrderDiff.ts
@@ -3,7 +3,7 @@ import usePrevious from '../../../../hooks/usePrevious';
 import { mapValues } from '../../../../util/iteratees';
 import { useChatAnimationType } from './useChatAnimationType';
 
-export default function useChatOrderDiff(orderedIds: (string | number)[] | undefined) {
+export default function useOrderDiff(orderedIds: (string | number)[] | undefined, key?: string) {
   const orderById = useMemo(() => {
     if (!orderedIds) {
       return undefined;
@@ -16,16 +16,17 @@ export default function useChatOrderDiff(orderedIds: (string | number)[] | undef
   }, [orderedIds]);
 
   const prevOrderById = usePrevious(orderById);
+  const prevChatId = usePrevious(key);
 
   const orderDiffById = useMemo(() => {
-    if (!orderById || !prevOrderById) {
+    if (!orderById || !prevOrderById || key !== prevChatId) {
       return {};
     }
 
     return mapValues(orderById, (order, id) => {
       return prevOrderById[id] !== undefined ? order - prevOrderById[id] : -Infinity;
     });
-  }, [orderById, prevOrderById]);
+  }, [key, orderById, prevChatId, prevOrderById]);
 
   const getAnimationType = useChatAnimationType(orderDiffById);