Merge pull request #154 from ShMcK/fix/ui-jitter

debounce window resize

Author: ShMcK

web-app/src/components/Workspace/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
-import { useWindowResize } from '../../services/hooks/resize'
+import { useWindowResize } from './resize'
 
 interface Props {
   children: React.ReactElement

web-app/src/services/hooks/resize.ts renamed to web-app/src/components/Workspace/resize.ts

@@ -10,11 +10,17 @@ export const useWindowResize = () => {
 
   // solution for windows getting off size
   React.useEffect(() => {
+    // timeoutId for debounce mechanism
+    let timeoutId: any
     const handleResize = () => {
-      setDimensions(resize())
+      if (timeoutId) {
+        // prevent execution of previous setTimeout
+        clearTimeout(timeoutId)
+      }
+      timeoutId = setTimeout(() => setDimensions(resize()), 50)
     }
     window.addEventListener('resize', handleResize)
     return () => window.removeEventListener('resize', handleResize)
-  }, [])
+  }, [window.innerWidth, window.innerHeight])
   return dimensions
 }