From 63924f2c49c5ec658a7514bd2969526f83eb0760 Mon Sep 17 00:00:00 2001
From: Laurian Gridinoc <laurian@gridinoc.name>
Date: Tue, 13 Aug 2019 15:20:39 +0300
Subject: [PATCH] lighter DOM when off-screen

---
 package.json                                          | 3 ++-
 packages/components/timed-text-editor/WrapperBlock.js | 8 +++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 70fe79b7..539d037e 100644
--- 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
index 3f3f4d1c..da8221d6 100644
--- 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>
     );