From 686592905d77ac14ea88dd3b1528bf6397a6e78f Mon Sep 17 00:00:00 2001
From: Miu Razvan <miu.razvan28@gmail.com>
Date: Fri, 16 Sep 2022 12:27:20 +0300
Subject: [PATCH] start countup when component in viewport

---
 package.json                |  1 +
 src/StatisticBlock/View.jsx | 24 +++++++++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b23c0ca..3db6716 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
   "dependencies": {
     "@plone/scripts": "*",
     "react-countup": "6.3.1",
+    "react-visibility-sensor": "5.1.1",
     "volto-slate": "*"
   },
   "devDependencies": {
diff --git a/src/StatisticBlock/View.jsx b/src/StatisticBlock/View.jsx
index f9f1b5d..239659b 100644
--- a/src/StatisticBlock/View.jsx
+++ b/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}