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

Message List: Fix blinking scrollbar when sending message

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-07-28 17:09:47 +03:00
parent d2a790fb06
commit b3e2eda5e6
2 changed files with 8 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/middle/MessageList.scss
View File

@ -286,12 +286,11 @@
} }
&.select-mode-active, &.select-mode-active,
&.has-focusing, &.has-focus-highlight,
body.has-context-menu &, body.has-context-menu &,
.animating > div > & { .animating > div > & {
/* /*
We need to remove the width of the scrollbar for the full-width selection and Remove scrollbar for full-width selection and compensate it with right padding
compensate for it with a right padding
*/ */
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0; width: 0;
@ -307,7 +306,7 @@
} }
.is-safari &.select-mode-active, .is-safari &.select-mode-active,
.is-safari &.has-focusing, .is-safari &.has-focus-highlight,
.is-safari.has-context-menu .messages-layout & { .is-safari.has-context-menu .messages-layout & {
padding-right: .375rem; padding-right: .375rem;
} }

18
src/components/middle/MessageList.tsx
View File

@ -86,6 +86,7 @@ type StateProps = {
isRestricted?: boolean; isRestricted?: boolean;
restrictionReason?: ApiRestrictionReason; restrictionReason?: ApiRestrictionReason;
focusingId?: number; focusingId?: number;
hasFocusHighlight?: boolean;
isSelectModeActive?: boolean; isSelectModeActive?: boolean;
animationLevel?: number; animationLevel?: number;
lastMessage?: ApiMessage; lastMessage?: ApiMessage;
@ -108,7 +109,6 @@ const INTERSECTION_MARGIN_FOR_MEDIA = IS_SINGLE_COLUMN_LAYOUT ? 300 : 500;
const FOCUSING_DURATION = 1000; const FOCUSING_DURATION = 1000;
const BOTTOM_FOCUS_MARGIN = 20; const BOTTOM_FOCUS_MARGIN = 20;
const SELECT_MODE_ANIMATION_DURATION = 200; const SELECT_MODE_ANIMATION_DURATION = 200;
const FOCUSING_FADE_ANIMATION_DURATION = 200;
const UNREAD_DIVIDER_CLASS = 'unread-divider'; const UNREAD_DIVIDER_CLASS = 'unread-divider';
const runDebouncedForScroll = debounce((cb) => cb(), SCROLL_DEBOUNCE, false); const runDebouncedForScroll = debounce((cb) => cb(), SCROLL_DEBOUNCE, false);
@ -133,6 +133,7 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
isRestricted, isRestricted,
restrictionReason, restrictionReason,
focusingId, focusingId,
hasFocusHighlight,
isSelectModeActive, isSelectModeActive,
animationLevel, animationLevel,
loadViewportMessages, loadViewportMessages,
@ -162,7 +163,6 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
const shouldAnimateAppearanceRef = useRef(Boolean(lastMessage)); const shouldAnimateAppearanceRef = useRef(Boolean(lastMessage));
const [containerHeight, setContainerHeight] = useState<number | undefined>(); const [containerHeight, setContainerHeight] = useState<number | undefined>();
const [hasFocusing, setHasFocusing] = useState<boolean>(Boolean(focusingId));
const areMessagesLoaded = Boolean(messageIds); const areMessagesLoaded = Boolean(messageIds);
@ -243,16 +243,6 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
throttleMs: INTERSECTION_THROTTLE_FOR_MEDIA, throttleMs: INTERSECTION_THROTTLE_FOR_MEDIA,
}); });
useEffect(() => {
if (focusingId) {
setHasFocusing(true);
} else {
setTimeout(() => {
setHasFocusing(false);
}, FOCUSING_FADE_ANIMATION_DURATION);
}
}, [focusingId]);
const messageGroups = useMemo(() => { const messageGroups = useMemo(() => {
if (!messageIds || !messagesById) { if (!messageIds || !messagesById) {
return undefined; return undefined;
@ -521,8 +511,8 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
noAvatars && 'no-avatars', noAvatars && 'no-avatars',
!canPost && 'no-composer', !canPost && 'no-composer',
type === 'pinned' && 'type-pinned', type === 'pinned' && 'type-pinned',
hasFocusHighlight && 'has-focus-highlight',
isSelectModeActive && 'select-mode-active', isSelectModeActive && 'select-mode-active',
hasFocusing && 'has-focusing',
isScrolled && 'scrolled', isScrolled && 'scrolled',
!isReady && 'is-animating', !isReady && 'is-animating',
); );
@ -765,6 +755,7 @@ export default memo(withGlobal<OwnProps>(
const { isRestricted, restrictionReason, lastMessage } = chat; const { isRestricted, restrictionReason, lastMessage } = chat;
const focusingId = selectFocusedMessageId(global, chatId); const focusingId = selectFocusedMessageId(global, chatId);
const hasFocusHighlight = focusingId ? !global.focusedMessage!.noHighlight : undefined;
const withLastMessageWhenPreloading = ( const withLastMessageWhenPreloading = (
threadId === MAIN_THREAD_ID threadId === MAIN_THREAD_ID
@ -793,6 +784,7 @@ export default memo(withGlobal<OwnProps>(
isViewportNewest: type !== 'thread' || selectIsViewportNewest(global, chatId, threadId), isViewportNewest: type !== 'thread' || selectIsViewportNewest(global, chatId, threadId),
threadFirstMessageId: selectFirstMessageId(global, chatId, threadId), threadFirstMessageId: selectFirstMessageId(global, chatId, threadId),
focusingId, focusingId,
hasFocusHighlight,
isSelectModeActive: selectIsInSelectMode(global), isSelectModeActive: selectIsInSelectMode(global),
animationLevel: global.settings.byKey.animationLevel, animationLevel: global.settings.byKey.animationLevel,
...(withLastMessageWhenPreloading && { lastMessage }), ...(withLastMessageWhenPreloading && { lastMessage }),