Split html into multiple files to improve scroll performance

pull/21833/head
Jaiwanth 2021-08-20 15:01:48 +05:30
parent fea9f4a4df
commit 98b0642b65
2 changed files with 12 additions and 4 deletions

View File

@ -260,6 +260,9 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
title: _t("Export Cancelled"), title: _t("Export Cancelled"),
description: <p>{ _t("The export was cancelled successfully") }</p>, description: <p>{ _t("The export was cancelled successfully") }</p>,
hasCloseButton: true, hasCloseButton: true,
onFinished: () => {
setExportCancelled(false);
},
}); });
return null; return null;
} else if (exportSuccessful) { } else if (exportSuccessful) {
@ -268,6 +271,9 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
title: _t("Export Successful"), title: _t("Export Successful"),
description: <p>{ _t("Your messages were successfully exported") }</p>, description: <p>{ _t("Your messages were successfully exported") }</p>,
hasCloseButton: true, hasCloseButton: true,
onFinished: () => {
setExportSuccessful(false);
},
}); });
return null; return null;
} else if (displayCancel) { } else if (displayCancel) {

View File

@ -387,10 +387,10 @@ export default class HTMLExporter extends Exporter {
return eventTile; return eventTile;
} }
protected async createHTML(events: MatrixEvent[]) { protected async createHTML(events: MatrixEvent[], start: number) {
let content = ""; let content = "";
let prevEvent = null; 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]; const event = events[i];
this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true); this.updateProgress(`Processing event ${i + 1} out of ${events.length}`, false, true);
if (this.cancelled) return this.cleanUp(); 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(`Fetched ${res.length} events in ${(fetchEnd - fetchStart)/1000}s`, true, false);
this.updateProgress("Creating HTML..."); 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(); const exportCSS = await getExportCSS();
this.addFile("index.html", new Blob([html]));
this.addFile("css/style.css", new Blob([exportCSS])); this.addFile("css/style.css", new Blob([exportCSS]));
this.addFile("js/script.js", new Blob([exportJS])); this.addFile("js/script.js", new Blob([exportJS]));