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

Middle Header: Show "Awaiting Network..." on mobile (#1410)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-08-23 03:38:38 +03:00
parent d291016123
commit 9ae489724f
1 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/middle/MiddleHeader.tsx
View File

@ -10,7 +10,7 @@ import {
ApiChat, ApiChat,
ApiUser, ApiUser,
ApiTypingStatus, ApiTypingStatus,
MAIN_THREAD_ID, MAIN_THREAD_ID, ApiUpdateConnectionStateType,
} from '../../api/types'; } from '../../api/types';
import { import {
@ -52,6 +52,7 @@ import { pick } from '../../util/iteratees';
import { formatIntegerCompact } from '../../util/textFormat'; import { formatIntegerCompact } from '../../util/textFormat';
import buildClassName from '../../util/buildClassName'; import buildClassName from '../../util/buildClassName';
import useLang from '../../hooks/useLang'; import useLang from '../../hooks/useLang';
import useBrowserOnline from '../../hooks/useBrowserOnline';
import PrivateChatInfo from '../common/PrivateChatInfo'; import PrivateChatInfo from '../common/PrivateChatInfo';
import GroupChatInfo from '../common/GroupChatInfo'; import GroupChatInfo from '../common/GroupChatInfo';
@ -90,6 +91,7 @@ type StateProps = {
lastSyncTime?: number; lastSyncTime?: number;
shouldSkipHistoryAnimations?: boolean; shouldSkipHistoryAnimations?: boolean;
currentTransitionKey: number; currentTransitionKey: number;
connectionState?: ApiUpdateConnectionStateType;
}; };
type DispatchProps = Pick<GlobalActions, ( type DispatchProps = Pick<GlobalActions, (
@ -119,6 +121,7 @@ const MiddleHeader: FC<OwnProps & StateProps & DispatchProps> = ({
lastSyncTime, lastSyncTime,
shouldSkipHistoryAnimations, shouldSkipHistoryAnimations,
currentTransitionKey, currentTransitionKey,
connectionState,
openChatWithInfo, openChatWithInfo,
pinMessage, pinMessage,
focusMessage, focusMessage,
@ -278,7 +281,21 @@ const MiddleHeader: FC<OwnProps & StateProps & DispatchProps> = ({
} }
}, [shouldUseStackedToolsClass, canRevealTools, canToolsCollideWithChatInfo, isRightColumnShown]); }, [shouldUseStackedToolsClass, canRevealTools, canToolsCollideWithChatInfo, isRightColumnShown]);
const isBrowserOnline = useBrowserOnline();
const isConnecting = (!isBrowserOnline || connectionState === 'connectionStateConnecting')
&& (IS_SINGLE_COLUMN_LAYOUT || (IS_TABLET_COLUMN_LAYOUT && !shouldShowCloseButton));
function renderInfo() { function renderInfo() {
if (isConnecting) {
return (
<>
{renderBackButton()}
<h3>
{lang('WaitingForNetwork')}
</h3>
</>
);
}
return ( return (
messageListType === 'thread' && threadId === MAIN_THREAD_ID ? ( messageListType === 'thread' && threadId === MAIN_THREAD_ID ? (
renderMainThreadInfo() renderMainThreadInfo()
@ -361,7 +378,7 @@ const MiddleHeader: FC<OwnProps & StateProps & DispatchProps> = ({
<div className="MiddleHeader" ref={componentRef}> <div className="MiddleHeader" ref={componentRef}>
<Transition <Transition
name={shouldSkipHistoryAnimations ? 'none' : 'slide-fade'} name={shouldSkipHistoryAnimations ? 'none' : 'slide-fade'}
activeKey={currentTransitionKey} activeKey={isConnecting ? Infinity : currentTransitionKey}
> >
{renderInfo} {renderInfo}
</Transition> </Transition>
@ -438,6 +455,7 @@ export default memo(withGlobal<OwnProps>(
lastSyncTime, lastSyncTime,
shouldSkipHistoryAnimations, shouldSkipHistoryAnimations,
currentTransitionKey: Math.max(0, global.messages.messageLists.length - 1), currentTransitionKey: Math.max(0, global.messages.messageLists.length - 1),
connectionState: global.connectionState,
}; };
const messagesById = selectChatMessages(global, chatId); const messagesById = selectChatMessages(global, chatId);