From 98b0642b65fcb5358ddf24a7494620d91c2aaace Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth2011@gmail.com>
Date: Fri, 20 Aug 2021 15:01:48 +0530
Subject: [PATCH] Split html into multiple files to improve scroll performance

---
 src/async-components/views/dialogs/ExportDialog.tsx |  6 ++++++
 src/utils/exportUtils/HtmlExport.tsx                | 10 ++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/async-components/views/dialogs/ExportDialog.tsx b/src/async-components/views/dialogs/ExportDialog.tsx
index b61d7975bf..40c9db0a67 100644
--- a/src/async-components/views/dialogs/ExportDialog.tsx
+++ b/src/async-components/views/dialogs/ExportDialog.tsx
@@ -260,6 +260,9 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
             title: _t("Export Cancelled"),
             description: <p>{ _t("The export was cancelled successfully") }</p>,
             hasCloseButton: true,
+            onFinished: () => {
+                setExportCancelled(false);
+            },
         });
         return null;
     } else if (exportSuccessful) {
@@ -268,6 +271,9 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
             title: _t("Export Successful"),
             description: <p>{ _t("Your messages were successfully exported") }</p>,
             hasCloseButton: true,
+            onFinished: () => {
+                setExportSuccessful(false);
+            },
         });
         return null;
     } else if (displayCancel) {
diff --git a/src/utils/exportUtils/HtmlExport.tsx b/src/utils/exportUtils/HtmlExport.tsx
index 1c39dfe844..5f8413fad8 100644
--- a/src/utils/exportUtils/HtmlExport.tsx
+++ b/src/utils/exportUtils/HtmlExport.tsx
@@ -387,10 +387,10 @@ export default class HTMLExporter extends Exporter {
         return eventTile;
     }
 
-    protected async createHTML(events: MatrixEvent[]) {
+    protected async createHTML(events: MatrixEvent[], start: number) {
         let content = "";
         let prevEvent = null;
-        for (let i = 0; i < events.length; i++) {
+        for (let i = start; i < Math.min(start + 1000, events.length); i++) {
             const event = events[i];
             this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
             if (this.cancelled) return this.cleanUp();
@@ -417,9 +417,11 @@ export default class HTMLExporter extends Exporter {
         this.updateProgress(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`, true, false);
 
         this.updateProgress("Creating HTML...");
-        const html = await this.createHTML(res);
+        for (let page = 0; page < res.length / 1000; page++) {
+            const html = await this.createHTML(res, page * 1000);
+            this.addFile(`messages${page ? page + 1 : ""}.html`, new Blob([html]));
+        }
         const exportCSS = await getExportCSS();
-        this.addFile("index.html", new Blob([html]));
         this.addFile("css/style.css", new Blob([exportCSS]));
         this.addFile("js/script.js", new Blob([exportJS]));