lighter DOM when off-screen

Laurian · Aug 13, 2019 · 63924f2 · 63924f2
1 parent be93c08
commit 63924f2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -50,7 +50,8 @@
     "mousetrap": "1.5.2",
     "prop-types": "^15.6.2",
     "react-keyboard-shortcuts": "^1.1.3",
-    "react-simple-tooltip": "^2.3.3"
+    "react-simple-tooltip": "^2.3.3",
+    "react-visibility-sensor": "^5.1.1"
   },
   "peerDependencies": {
     "react": "^16.6.0",

diff --git a/packages/components/timed-text-editor/WrapperBlock.js b/packages/components/timed-text-editor/WrapperBlock.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { EditorBlock, Modifier, EditorState, SelectionState } from 'draft-js';
+import VisibilitySensor from 'react-visibility-sensor';
 
 import SpeakerLabel from './SpeakerLabel';
 // import { shortTimecode, secondsToTimecode } from '../../Util/timecode-converter/';
@@ -109,7 +110,12 @@ class WrapperBlock extends React.Component {
           {this.props.blockProps.showTimecodes ? timecodeElement : ''}
         </div>
         <div className={ style.text }>
-          <EditorBlock { ...this.props } />
+          <VisibilitySensor partialVisibility={true}>
+            {({ isVisible }) => isVisible ?
+              <EditorBlock { ...this.props } />
+              : <div contentEditable={ false }>{ this.props.block.text }</div>
+            }
+          </VisibilitySensor>
         </div>
       </div>
     );