diff --git a/web-app/src/components/Workspace/index.tsx b/web-app/src/components/Workspace/index.tsx
index 07684381..660cadcb 100644
--- a/web-app/src/components/Workspace/index.tsx
+++ b/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
diff --git a/web-app/src/services/hooks/resize.ts b/web-app/src/components/Workspace/resize.ts
similarity index 62%
rename from web-app/src/services/hooks/resize.ts
rename to web-app/src/components/Workspace/resize.ts
index 0d7e30d5..dec5f878 100644
--- a/web-app/src/services/hooks/resize.ts
+++ b/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
}