From 6ee2501991886f0c1f1c89a9b5724d61fc4fc719 Mon Sep 17 00:00:00 2001 From: ThibG Date: Sun, 25 Aug 2019 15:48:50 +0200 Subject: [PATCH] [Glitch] Change window resize handler to switch to/from mobile layout as soon as needed Port bd4099d976b52f7ec00e00b23cfe6e2766ff1e4d to glitch-soc Signed-off-by: Thibaut Girka --- .../flavours/glitch/features/ui/index.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index dbfaf1220d4..33625581df2 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -138,14 +138,24 @@ class SwitchingColumnsArea extends React.PureComponent { window.removeEventListener('resize', this.handleResize); } - handleResize = debounce(() => { + handleLayoutChange = debounce(() => { // The cached heights are no longer accurate, invalidate this.props.onLayoutChange(); - - this.setState({ mobile: isMobile(window.innerWidth, this.props.layout) }); }, 500, { trailing: true, - }); + }) + + handleResize = () => { + const mobile = isMobile(window.innerWidth, this.props.layout); + + if (mobile !== this.state.mobile) { + this.handleLayoutChange.cancel(); + this.props.onLayoutChange(); + this.setState({ mobile }); + } else { + this.handleLayoutChange(); + } + } setRef = c => { this.node = c.getWrappedInstance();