Use debounce for onDimensionChange in withWindowDimensions HOC

[tugbadogan]

cc @deetergp

Details

React native has a bug where it calls onDimensionChange callback with swapped dimensions for a very short time before it's called with correct dimensions. facebook/react-native#29290

When this happens, a bug in react-navigation causes left menu to be positioned in the center instead of left side. We're fixing this issue by using debounce to prevent onDimensionChange callback from being called multiple times within 100ms to let react-navigation to complete its animations and positioning elements properly.

Fixed Issues

Fixes #2180

Tests

Verified that left menu is not shown in the center when the app is loaded from background on iPad devices.

QA Steps

1. Launch App on iPad with iOS 12
2. Open any chat
3. Switch orientation of iPad from landscape to portrait
4. Switch orientation back to landscape
5. Tap on home button on iPAD to put app into the background
6. Open App from background
7. Observe that left menu is not shown in the center

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

iOS

Screen.Recording.2021-05-11.at.18.35.16.420p.mov

[jasperhuangg]

I think it'd be good to include a comment explaining why we're debouncing this (like you've explained in the issue) with a link to the react-native issue. Since this should be a temporary fix, it's good to have some context if we choose to remove this in the future because the bug is fixed.

Other than that, the changes look good to me, and I was able to test them as well, nice job!

[tugbadogan]

I think it'd be good to include a comment explaining why we're debouncing this (like you've explained in the issue) with a link to the react-native issue. Since this should be a temporary fix, it's good to have some context if we choose to remove this in the future because the bug is fixed.

Other than that, the changes look good to me, and I was able to test them as well, nice job!

Thanks for the review @jasperhuangg, added comments and updated the PR 👍

[jasperhuangg]

Great explanation! Thanks :)

[OSBotify]

🚀 Deployed to staging in version: 1.0.43-1🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production in version: 1.0.44-0🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅