Statistics: Better animation when switching to message statistics (#1882)

This commit is contained in:
Alexander Zinchuk 2022-05-30 15:40:21 +04:00
parent dc69997bd3
commit 3300d71e5d
2 changed files with 4 additions and 16 deletions

View File

@ -276,7 +276,7 @@ const RightColumn: FC<StateProps> = ({
); );
case RightColumnContent.Statistics: case RightColumnContent.Statistics:
return <Statistics chatId={chatId!} isActive={isOpen && isActive} />; return <Statistics chatId={chatId!} />;
case RightColumnContent.MessageStatistics: case RightColumnContent.MessageStatistics:
return <MessageStatistics chatId={chatId!} isActive={isOpen && isActive} />; return <MessageStatistics chatId={chatId!} isActive={isOpen && isActive} />;
case RightColumnContent.StickerSearch: case RightColumnContent.StickerSearch:
@ -319,6 +319,7 @@ const RightColumn: FC<StateProps> = ({
renderCount={MAIN_SCREENS_COUNT + MANAGEMENT_SCREENS_COUNT} renderCount={MAIN_SCREENS_COUNT + MANAGEMENT_SCREENS_COUNT}
activeKey={isManagement ? MAIN_SCREENS_COUNT + managementScreen : renderingContentKey} activeKey={isManagement ? MAIN_SCREENS_COUNT + managementScreen : renderingContentKey}
shouldCleanup shouldCleanup
cleanupExceptionKey={renderingContentKey === RightColumnContent.MessageStatistics ? RightColumnContent.Statistics : undefined}
> >
{renderContent} {renderContent}
</Transition> </Transition>

View File

@ -61,23 +61,19 @@ const GROUP_GRAPHS = Object.keys(GROUP_GRAPHS_TITLES) as (keyof ApiGroupStatisti
export type OwnProps = { export type OwnProps = {
chatId: string; chatId: string;
isActive: boolean;
}; };
export type StateProps = { export type StateProps = {
statistics: ApiChannelStatistics | ApiGroupStatistics; statistics: ApiChannelStatistics | ApiGroupStatistics;
dcId?: number; dcId?: number;
isGroup: boolean; isGroup: boolean;
messageId?: number;
}; };
const Statistics: FC<OwnProps & StateProps> = ({ const Statistics: FC<OwnProps & StateProps> = ({
chatId, chatId,
isActive,
statistics, statistics,
dcId, dcId,
isGroup, isGroup,
messageId,
}) => { }) => {
const lang = useLang(); const lang = useLang();
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
@ -92,13 +88,6 @@ const Statistics: FC<OwnProps & StateProps> = ({
loadStatistics({ chatId, isGroup }); loadStatistics({ chatId, isGroup });
}, [chatId, loadStatistics, isGroup]); }, [chatId, loadStatistics, isGroup]);
useEffect(() => {
if (!isActive) {
loadedCharts.current = [];
setIsReady(false);
}
}, [isActive]);
const graphs = useMemo(() => { const graphs = useMemo(() => {
return isGroup ? GROUP_GRAPHS : CHANNEL_GRAPHS; return isGroup ? GROUP_GRAPHS : CHANNEL_GRAPHS;
}, [isGroup]); }, [isGroup]);
@ -179,7 +168,7 @@ const Statistics: FC<OwnProps & StateProps> = ({
graphs, graphTitles, isReady, statistics, lang, chatId, loadStatisticsAsyncGraph, dcId, forceUpdate, graphs, graphTitles, isReady, statistics, lang, chatId, loadStatisticsAsyncGraph, dcId, forceUpdate,
]); ]);
if (!isReady || !statistics || messageId) { if (!isReady || !statistics) {
return <Loading />; return <Loading />;
} }
@ -214,11 +203,9 @@ export default memo(withGlobal<OwnProps>(
const chat = selectChat(global, chatId); const chat = selectChat(global, chatId);
const dcId = chat?.fullInfo?.statisticsDcId; const dcId = chat?.fullInfo?.statisticsDcId;
const isGroup = chat?.type === 'chatTypeSuperGroup'; const isGroup = chat?.type === 'chatTypeSuperGroup';
// Show Loading component if message was already selected for improving transition animation
const messageId = global.statistics.currentMessageId;
return { return {
statistics, dcId, isGroup, messageId, statistics, dcId, isGroup,
}; };
}, },
)(Statistics)); )(Statistics));