From 4d3df145de52dd07b38b6646299542e978b8a58d Mon Sep 17 00:00:00 2001
From: Rainer Simon <rainer.simon@ait.ac.at>
Date: Sun, 5 Apr 2020 20:58:16 +0200
Subject: [PATCH] Render performance optimization

---
 src/editor/Editor.jsx          |  2 --
 src/highlighter/Highlighter.js | 23 ++++++++++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/editor/Editor.jsx b/src/editor/Editor.jsx
index 5ad29d6..8f7f53e 100644
--- a/src/editor/Editor.jsx
+++ b/src/editor/Editor.jsx
@@ -1,7 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
 import setPosition from './setPosition';
-import TagWidget  from './widgets/tag/TagWidget';
-import CommentWidget from './widgets/comment/CommentWidget';
 
 /**
  * The popup editor component.
diff --git a/src/highlighter/Highlighter.js b/src/highlighter/Highlighter.js
index 1a31d1a..90a20a4 100644
--- a/src/highlighter/Highlighter.js
+++ b/src/highlighter/Highlighter.js
@@ -1,7 +1,7 @@
-import WebAnnotation from '../WebAnnotation';
-
 const TEXT = 3; // HTML DOM node type for text nodes
 
+const RENDER_BATCH_SIZE = 100; // Number of annotations to render in one frame
+
 const uniqueItems = items => Array.from(new Set(items))
 
 export default class Highlighter {
@@ -12,13 +12,30 @@ export default class Highlighter {
   }
 
   init = annotations => {    
+    const startTime = performance.now();
+
     // Discard all annotations without a TextPositionSelector
     const highlights = annotations.filter(a => a.selector('TextPositionSelector'));
 
     // Sorting bottom to top significantly speeds things up,
     // because walkTextNodes will have a lot less to walk 
     highlights.sort((a, b) => b.start - a.start);
-    highlights.forEach(this._addAnnotation);
+
+    // Render loop
+    const render = annotations => {
+      const batch = annotations.slice(0, RENDER_BATCH_SIZE);
+      const remainder = annotations.slice(RENDER_BATCH_SIZE);
+
+      requestAnimationFrame(() => {
+        batch.forEach(this._addAnnotation);
+        if (remainder.length > 0)
+          render(remainder);
+        else
+          console.log(`Rendered ${highlights.length}, took ${performance.now() - startTime}ms`);
+      });
+    }
+
+    render(highlights);
   }
 
   _addAnnotation = annotation => {