Improved visibility sensor

eea · Jul 14, 2022 · fcc69b4 · fcc69b4
1 parent 6f2c782
commit fcc69b4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 39 deletions.
diff --git a/src/Blocks/Treemap/Treemap.jsx b/src/Blocks/Treemap/Treemap.jsx
@@ -7,7 +7,7 @@ import { compose } from 'redux';
 import loadable from '@loadable/component';
 import config from '@plone/volto/registry';
 import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
-import { Placeholder } from '@eeacms/volto-datablocks/components';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
 
 const LoadablePlotly = loadable(() =>
   import(
@@ -53,32 +53,25 @@ function Treemap(props) {
 
   return (
     <div className="treemap-chart">
-      <Placeholder
-        className="connected-chart"
-        partialVisibility={true}
-        offset={{ top: -100, bottom: -100 }}
-        delayedCall={true}
-      >
-        {() => (
-          <div className="connected-chart-wrapper">
-            <LoadablePlotly
-              data={traces}
-              layout={layout}
-              frames={[]}
-              config={{
-                displayModeBar: false,
-                editable: false,
-                responsive: true,
-                useResizeHandler: true,
-              }}
-              style={{
-                maxWidth: '100%',
-                margin: 'auto',
-              }}
-            />
-          </div>
-        )}
-      </Placeholder>
+      <VisibilitySensor className="connected-chart">
+        <div className="connected-chart-wrapper">
+          <LoadablePlotly
+            data={traces}
+            layout={layout}
+            frames={[]}
+            config={{
+              displayModeBar: false,
+              editable: false,
+              responsive: true,
+              useResizeHandler: true,
+            }}
+            style={{
+              maxWidth: '100%',
+              margin: 'auto',
+            }}
+          />
+        </div>
+      </VisibilitySensor>
     </div>
   );
 }

diff --git a/src/ConnectedChart/ConnectedChartWrapper.jsx b/src/ConnectedChart/ConnectedChartWrapper.jsx
@@ -5,7 +5,7 @@
 import React from 'react';
 import ConnectedChart from './ConnectedChart';
 
-import { Placeholder } from '@eeacms/volto-datablocks/components';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
 
 /*
  * @param { object } data The chart data, layout,  extra config, etc.
@@ -16,17 +16,9 @@ import { Placeholder } from '@eeacms/volto-datablocks/components';
 function ConnectedChartWrapper(props) {
   return (
     <>
-      <Placeholder
-        getDOMElement={(val) => {
-          return val?.el;
-        }}
-        className="connected-chart"
-        partialVisibility={true}
-        offset={{ top: -50, bottom: -50 }}
-        delayedCall={true}
-      >
-        {() => <ConnectedChart {...props} />}
-      </Placeholder>
+      <VisibilitySensor className="connected-chart">
+        <ConnectedChart {...props} />
+      </VisibilitySensor>
     </>
   );
 }