danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-12-12 09:09:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Message List: Fix scroll animation after window resize

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-05-12 03:13:20 +03:00
parent b96643ea2a
commit 37ce132cce
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,6 +52,7 @@ import resetScroll from '../../util/resetScroll';
import fastSmoothScroll, { isAnimatingScroll } from '../../util/fastSmoothScroll'; import fastSmoothScroll, { isAnimatingScroll } from '../../util/fastSmoothScroll';
import renderText from '../common/helpers/renderText'; import renderText from '../common/helpers/renderText';
import useLang, { LangFn } from '../../hooks/useLang'; import useLang, { LangFn } from '../../hooks/useLang';
import useWindowSize from '../../hooks/useWindowSize';
import Loading from '../ui/Loading'; import Loading from '../ui/Loading';
import MessageScroll from './MessageScroll'; import MessageScroll from './MessageScroll';
@ -328,9 +329,11 @@ const MessageList: FC<OwnProps & StateProps & DispatchProps> = ({
}; };
}, []); }, []);
useLayoutEffect(() => { // Memorize height for scroll animation
const { height: windowHeight } = useWindowSize();
useEffect(() => {
containerRef.current!.dataset.normalHeight = String(containerRef.current!.offsetHeight); containerRef.current!.dataset.normalHeight = String(containerRef.current!.offsetHeight);
}, []); }, [windowHeight]);
// Workaround for an iOS bug when animated stickers sometimes disappear // Workaround for an iOS bug when animated stickers sometimes disappear
useLayoutEffect(() => { useLayoutEffect(() => {

6
src/hooks/useWindowSize.ts
View File

@ -5,7 +5,7 @@ import { IDimensions } from '../modules/helpers';
import { throttle } from '../util/schedulers'; import { throttle } from '../util/schedulers';
import windowSize from '../util/windowSize'; import windowSize from '../util/windowSize';
const RESIZE_TIMEOUT_MS = 250; const THROTTLE = 250;
export default () => { export default () => {
const [size, setSize] = useState<IDimensions>(windowSize.get()); const [size, setSize] = useState<IDimensions>(windowSize.get());
@ -13,14 +13,14 @@ export default () => {
useEffect(() => { useEffect(() => {
const handleResize = throttle(() => { const handleResize = throttle(() => {
setSize(windowSize.get()); setSize(windowSize.get());
}, RESIZE_TIMEOUT_MS, false); }, THROTTLE, false);
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
return () => { return () => {
window.removeEventListener('resize', handleResize); window.removeEventListener('resize', handleResize);
}; };
}); }, []);
return size; return size;
}; };