don't run screen update on scroll event + add withScreenSize hocs

src/ScreenSize/ScreenSize.jsx

@@ -1,10 +1,12 @@
 /* eslint-disable no-extend-native */
 import React from 'react';
+import { compose } from 'redux';
 import cs from 'classnames';
 import config from '@plone/volto/registry';
 import { BodyClass } from '@plone/volto/helpers';
 import { updateScreen } from '../actions';
 import { detectTouchScreen } from '../utils';
+import { withScreenSize } from '../hocs';
 
 if (!Number.prototype.toPixel) {
   Number.prototype.toPixel = function toPixel() {
@@ -34,6 +36,7 @@ class ScreenSize extends React.Component {
     const screen = {
       height: window.screen.availHeight,
       width: window.screen.availWidth,
+      browserToolbarHeight: window.outerHeight - window.innerHeight,
     };
 
     const page = {
@@ -77,16 +80,15 @@ class ScreenSize extends React.Component {
     if (__SERVER__) return;
     this.updateScreen({
       hasTouchScreen: detectTouchScreen(),
-      browserToolbarHeight: window.outerHeight - window.innerHeight,
     });
     window.addEventListener('resize', debounce(this.updateScreen));
-    window.addEventListener('scroll', debounce(this.updateScreen));
+    // window.addEventListener('scroll', debounce(this.updateScreen));
   }
 
   componentWillUnmount() {
     if (__SERVER__) return;
     window.removeEventListener('resize', debounce(this.updateScreen));
-    window.removeEventListener('scroll', debounce(this.updateScreen));
+    // window.removeEventListener('scroll', debounce(this.updateScreen));
   }
 
   componentDidUpdate(prevProps) {
@@ -105,4 +107,4 @@ class ScreenSize extends React.Component {
   }
 }
 
-export default ScreenSize;
+export default compose(withScreenSize)(ScreenSize);

src/ScreenSize/index.js

@@ -6,7 +6,7 @@ export default (config) => {
   config.settings.appExtras = [
     ...(config.settings.appExtras || []),
     {
-      match: '/**',
+      match: '',
       component: ScreenSize,
     },
   ];

src/hocs/index.js

@@ -0,0 +1,3 @@
+import withScreenSize from './withScreenSize';
+
+export { withScreenSize };

src/hocs/withScreenSize.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+export default function withScreenSize(WrappedComponent) {
+  return (props) => {
+    const screen = useSelector((state) => state.screen);
+
+    return <WrappedComponent {...props} screen={screen} />;
+  };
+}