start countup when component in viewport

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@plone/scripts": "*",
     "react-countup": "6.3.1",
+    "react-visibility-sensor": "5.1.1",
     "volto-slate": "*"
   },
   "devDependencies": {

src/StatisticBlock/View.jsx

@@ -1,12 +1,32 @@
 import React from 'react';
 import cx from 'classnames';
 import CountUp from 'react-countup';
+import VisibilitySensor from 'react-visibility-sensor';
 import { Statistic } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { serializeText } from '@eeacms/volto-statistic-block/helpers';
 
 import './styles.less';
 
+const CountUpWrapper = ({ countUpRef, start }) => {
+  const [visible, setVisible] = React.useState(false);
+
+  return (
+    <VisibilitySensor
+      onChange={(isVisible) => {
+        start();
+        if (isVisible && !visible) {
+          setVisible(true);
+        }
+      }}
+      active={!visible}
+      delayedCall
+    >
+      <span ref={countUpRef} />
+    </VisibilitySensor>
+  );
+};
+
 const View = ({ data, mode }) => {
   const {
     horizontal = false,
@@ -64,7 +84,9 @@ const View = ({ data, mode }) => {
                   decimals={animation.decimals > 0 ? animation.decimals : 0}
                   prefix={animation.prefix || ''}
                   suffix={animation.suffix || ''}
-                />
+                >
+                  {(props) => <CountUpWrapper {...props} />}
+                </CountUp>
               </Statistic.Value>
               <Statistic.Label className={cx(labelVariation)}>
                 {item.label}