From 85d8e036d57b6682a298b47cd9e851a97cefec13 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quenting@element.io>
Date: Thu, 14 Nov 2024 14:00:01 +0100
Subject: [PATCH] Lazy-load pako when submitting rageshake (#2782)

---
 package.json                     |  1 +
 src/settings/submit-rageshake.ts | 16 +++++++++-------
 yarn.lock                        |  5 +++++
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 7c18352b..78f462d9 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.0.0",
+    "@types/pako": "^2.0.3",
     "@types/qrcode": "^1.5.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
diff --git a/src/settings/submit-rageshake.ts b/src/settings/submit-rageshake.ts
index 1ab90667..ae320493 100644
--- a/src/settings/submit-rageshake.ts
+++ b/src/settings/submit-rageshake.ts
@@ -6,9 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { ComponentProps, useCallback, useEffect, useState } from "react";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import pako from "pako";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
   ClientEvent,
@@ -23,11 +20,14 @@ import { Config } from "../config/Config";
 import { ElementCallOpenTelemetry } from "../otel/otel";
 import { RageshakeRequestModal } from "../room/RageshakeRequestModal";
 
-const gzip = (text: string): Blob => {
+const gzip = async (text: string): Promise<Blob> => {
+  // pako is relatively large (200KB), so we only import it when needed
+  const { gzip: pakoGzip } = await import("pako");
+
   // encode as UTF-8
   const buf = new TextEncoder().encode(text);
   // compress
-  return new Blob([pako.gzip(buf)]);
+  return new Blob([pakoGzip(buf)]);
 };
 
 /**
@@ -253,12 +253,14 @@ export function useSubmitRageshake(): {
           const logs = await getLogsForReport();
 
           for (const entry of logs) {
-            body.append("compressed-log", gzip(entry.lines), entry.id);
+            body.append("compressed-log", await gzip(entry.lines), entry.id);
           }
 
           body.append(
             "file",
-            gzip(ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump()),
+            await gzip(
+              ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump(),
+            ),
             "traces.json.gz",
           );
         }
diff --git a/yarn.lock b/yarn.lock
index 504bc0eb..00d3e13b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3060,6 +3060,11 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz#56e2cc26c397c038fab0e3a917a12d5c5909e901"
   integrity sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==
 
+"@types/pako@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/pako/-/pako-2.0.3.tgz#b6993334f3af27c158f3fe0dfeeba987c578afb1"
+  integrity sha512-bq0hMV9opAcrmE0Byyo0fY3Ew4tgOevJmQ9grUhpXQhYfyLJ1Kqg3P33JT5fdbT2AjeAjR51zqqVjAL/HMkx7Q==
+
 "@types/prop-types@*":
   version "15.7.13"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"