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

Composer: Disable send button animations on component mounting (#3135)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-05-03 20:21:03 +04:00
parent 268b4538d0
commit cc8a21d051
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/middle/composer/Composer.scss
View File

@ -155,14 +155,15 @@
&.not-ready > .icon {
animation-duration: 0ms !important;
}
}
body.no-message-composer-animations & {
.icon-send,
.icon-microphone-alt,
.icon-check,
.icon-schedule {
animation-duration: 0ms !important;
}
&:not(.mounted) > .Button,
body.no-message-composer-animations & > .Button {
.icon-send,
.icon-microphone-alt,
.icon-check,
.icon-schedule {
animation-duration: 0ms !important;
}
}

6
src/components/middle/composer/Composer.tsx
View File

@ -113,6 +113,7 @@ import useDerivedState from '../../../hooks/useDerivedState';
import { useStateRef } from '../../../hooks/useStateRef';
import useEffectWithPrevDeps from '../../../hooks/useEffectWithPrevDeps';
import useDraft from './hooks/useDraft';
import useTimeout from '../../../hooks/useTimeout';
import DeleteMessageModal from '../../common/DeleteMessageModal.async';
import Button from '../../ui/Button';
@ -225,6 +226,7 @@ const MOBILE_KEYBOARD_HIDE_DELAY_MS = 100;
const SELECT_MODE_TRANSITION_MS = 200;
const MESSAGE_MAX_LENGTH = 4096;
const SENDING_ANIMATION_DURATION = 350;
const MOUNT_ANIMATION_DURATION = 430;
// eslint-disable-next-line max-len
const APPENDIX = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#000" filter="url(#a)"/><path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#FFF" class="corner"/></g></svg>';
@ -315,6 +317,7 @@ const Composer: FC<OwnProps & StateProps> = ({
const inputRef = useRef<HTMLDivElement>(null);
const [getHtml, setHtml] = useSignal('');
const [getIsMounted, setIsMounted] = useSignal(false);
const getSelectionRange = useGetSelectionRange(EDITABLE_INPUT_CSS_SELECTOR);
const lastMessageSendTimeSeconds = useRef<number>();
const prevDropAreaState = usePrevious(dropAreaState);
@ -335,6 +338,8 @@ const Composer: FC<OwnProps & StateProps> = ({
}, [cancelForceShowSymbolMenu]);
const [requestCalendar, calendar] = useSchedule(canScheduleUntilOnline, handleScheduleCancel);
useTimeout(() => { setIsMounted(true); }, MOUNT_ANIMATION_DURATION);
useEffect(() => {
lastMessageSendTimeSeconds.current = undefined;
}, [chatId]);
@ -1207,6 +1212,7 @@ const Composer: FC<OwnProps & StateProps> = ({
'Composer',
!isSelectModeActive && 'shown',
isHoverDisabled && 'hover-disabled',
getIsMounted() && 'mounted',
);
const handleSendScheduled = useCallback(() => {