From 854a990d3ca7b7d92b9fd7aca1148ef330f07563 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 15a82d48eab3ec982c9c95543218f92b21f31a5a 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 dbfaf1220d..33625581df 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();