ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Forum Panel: Fix blinking general topic when switching forums (#2815)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-03-19 22:31:38 -05:00
parent 033422581b
commit e86ee7bcdf
3 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/left/main/ChatList.tsx
View File

@ -25,7 +25,7 @@ import { useFolderManagerForOrderedIds } from '../../../hooks/useFolderManager';
import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver'; import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver';
import { useHotkeys } from '../../../hooks/useHotkeys'; import { useHotkeys } from '../../../hooks/useHotkeys';
import useDebouncedCallback from '../../../hooks/useDebouncedCallback'; import useDebouncedCallback from '../../../hooks/useDebouncedCallback';
import useChatOrderDiff from './hooks/useChatOrderDiff'; import useOrderDiff from './hooks/useOrderDiff';
import InfiniteScroll from '../../ui/InfiniteScroll'; import InfiniteScroll from '../../ui/InfiniteScroll';
import Loading from '../../ui/Loading'; import Loading from '../../ui/Loading';
@ -78,7 +78,7 @@ const ChatList: FC<OwnProps> = ({
const archiveHeight = shouldDisplayArchive const archiveHeight = shouldDisplayArchive
? archiveSettings.isMinimized ? ARCHIVE_MINIMIZED_HEIGHT : CHAT_HEIGHT_PX : 0; ? 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); const [viewportIds, getMore] = useInfiniteScroll(undefined, orderedIds, undefined, CHAT_LIST_SLICE);

4
src/components/left/main/ForumPanel.tsx
View File

@ -23,7 +23,7 @@ import { captureEvents, SwipeDirection } from '../../../util/captureEvents';
import useInfiniteScroll from '../../../hooks/useInfiniteScroll'; import useInfiniteScroll from '../../../hooks/useInfiniteScroll';
import { useIntersectionObserver, useOnIntersect } from '../../../hooks/useIntersectionObserver'; import { useIntersectionObserver, useOnIntersect } from '../../../hooks/useIntersectionObserver';
import useChatOrderDiff from './hooks/useChatOrderDiff'; import useOrderDiff from './hooks/useOrderDiff';
import useLang from '../../../hooks/useLang'; import useLang from '../../../hooks/useLang';
import usePrevious from '../../../hooks/usePrevious'; import usePrevious from '../../../hooks/usePrevious';
import useHistoryBack from '../../../hooks/useHistoryBack'; import useHistoryBack from '../../../hooks/useHistoryBack';
@ -119,7 +119,7 @@ const ForumPanel: FC<OwnProps & StateProps> = ({
: []; : [];
}, [chat]); }, [chat]);
const { orderDiffById, getAnimationType } = useChatOrderDiff(orderedIds); const { orderDiffById, getAnimationType } = useOrderDiff(orderedIds, chat?.id);
const [viewportIds, getMore] = useInfiniteScroll(() => { const [viewportIds, getMore] = useInfiniteScroll(() => {
if (!chat || !lastSyncTime) return; if (!chat || !lastSyncTime) return;

7
src/components/left/main/hooks/useChatOrderDiff.ts → src/components/left/main/hooks/useOrderDiff.ts
View File

@ -3,7 +3,7 @@ import usePrevious from '../../../../hooks/usePrevious';
import { mapValues } from '../../../../util/iteratees'; import { mapValues } from '../../../../util/iteratees';
import { useChatAnimationType } from './useChatAnimationType'; 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(() => { const orderById = useMemo(() => {
if (!orderedIds) { if (!orderedIds) {
return undefined; return undefined;
@ -16,16 +16,17 @@ export default function useChatOrderDiff(orderedIds: (string | number)[] | undef
}, [orderedIds]); }, [orderedIds]);
const prevOrderById = usePrevious(orderById); const prevOrderById = usePrevious(orderById);
const prevChatId = usePrevious(key);
const orderDiffById = useMemo(() => { const orderDiffById = useMemo(() => {
if (!orderById || !prevOrderById) { if (!orderById || !prevOrderById || key !== prevChatId) {
return {}; return {};
} }
return mapValues(orderById, (order, id) => { return mapValues(orderById, (order, id) => {
return prevOrderById[id] !== undefined ? order - prevOrderById[id] : -Infinity; return prevOrderById[id] !== undefined ? order - prevOrderById[id] : -Infinity;
}); });
}, [orderById, prevOrderById]); }, [key, orderById, prevChatId, prevOrderById]);
const getAnimationType = useChatAnimationType(orderDiffById); const getAnimationType = useChatAnimationType(orderDiffById);