Chat: React.lazy/React.Suspense with secureboot integration, build improvements, dependency cleanup

.babelrc

@@ -13,7 +13,6 @@
   "env": {
     "development": {
       "plugins": [
-        "react-hot-loader/babel",
         "@babel/transform-react-display-name",
         [
           "@babel/plugin-proposal-decorators",

.eslintignore

@@ -21,7 +21,7 @@ karma.conf.js
 nacl-fast.js
 pdf.worker.js
 js/cmsSnapshot.js
-js/chat/bundle.js
+js/chat/bundle*.js
 js/transfers/meths/firefox-extension.js
 contrib/Electron/main.js
 *.sh
@@ -30,5 +30,6 @@ js/utils/aws.js
 js/chat/emojidata/emojis.json
 eslint-local-rules.js
 Gruntfile.js
+webpack.config.js
 sqlite3.js
 sqlite3-worker1.js

.eslintrc.json

@@ -311,6 +311,7 @@
             ],
             "rules": {
                 "complexity": [2, 28],
+                "es/no-dynamic-import": "off",
                 "es/no-optional-chaining": "off",
                 "local-rules/classes": "off",
                 "no-negated-condition": "off",

.jscpd.json

@@ -5,7 +5,7 @@
   "maxSize": "340kb",
   "format": ["javascript", "jsx"],
   "reporters": ["console", "badge"],
-  "ignore": ["**/node_modules/**", "**/tests/**", "**/vendor/**", "**/**/bundle.js"],
+  "ignore": ["**/node_modules/**", "**/tests/**", "**/vendor/**", "**/**/bundle.js", "**/bundle.*.js"],
   "tokensToSkip": ["comment", "empty", "new_line", "ignore"],
   "gitignore": true
 }

INSTALL.md

@@ -35,20 +35,23 @@ Development Environment
 -----------------------
 
 Since adding React to our toolkit (because of the needs and
-requirements added by the MEGAchat), there is a new file
-(``js/chat/bundle.js``) to be generated to run the code (it is not
-available in the repository).
+requirements added by the MEGAchat), there are new files
+(``js/chat/bundle.js`` and ``js/chat/bundle.*.js`` chunks) to be
+generated to run the code (they are not available in the repository).
 
-This file is generated by ``webpack``, and depending on the
+These files are generated by ``webpack``, and depending on the
 environment you may run the webclient in development in two different
 methods.
 
 A simple script watches for changes in React UI related files,
-generates required artifacts automatically (in memory, no files
-generated), serves them (via HTTP), and updates the UI with changes
-live (including relevant code reloads). This process is very fast,
-easy and efficient. You will get this convenience just by running the
-following:
+generates required artifacts automatically (in memory, with
+no files generated) and serves them (via HTTP).
+
+**Note:** Hot Module Replacement (HMR) is intentionally disabled to ensure
+the development environment strictly mirrors the production security model
+(`secureboot`). You will need to refresh the page to see your changes.
+
+You can run the development server with:
 
 ```
 scripts/dev_server.sh

css/chat-bundle.css

@@ -1600,6 +1600,33 @@ body.theme-dark .lhp-container .lhp-filter-tag {
   margin-top: 24px;
 }
 
+.meetings-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border: 1px solid tomato;
+}
+.meetings-error--content {
+  text-align: center;
+  color: var(--text-color-medium);
+}
+.meetings-error--content i {
+  display: block;
+  margin: 32px auto;
+  width: 195px;
+  height: 65px;
+}
+.meetings-error--content a {
+  text-decoration: underline;
+  color: var(--text-color-high);
+}
+.meetings-error--details {
+  margin: 58px 0;
+  font: var(--text-code1);
+}
+
 .meetings-call {
   position: fixed;
   top: 0;

css/chat-bundle.scss

@@ -8,6 +8,7 @@
 @use 'meetings/_leftPanel.scss';
 @use 'meetings/_inviteParticipantsPanel.scss';
 @use 'meetings/_chatOverlay.scss';
+@use 'meetings/_errorBoundary.scss';
 
 // The main `Meetings` in-call container
 @use 'meetings/_call.scss';

css/meetings/_errorBoundary.scss

@@ -0,0 +1,30 @@
+.meetings-error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border: 1px solid tomato;
+
+    &--content {
+        text-align: center;
+        color: var(--text-color-medium);
+
+        i {
+            display: block;
+            margin: 32px auto;
+            width: 195px;
+            height: 65px;
+        }
+
+        a {
+            text-decoration: underline;
+            color: var(--text-color-high);
+        }
+    }
+
+    &--details {
+        margin: 58px 0;
+        font: var(--text-code1);
+    }
+}

js/chat/README.md

@@ -1,10 +1,16 @@
 ### Generated files used by the MEGA WebClient chat application.
 
-
 ---
-bundle.js: The libraries and custom JavaScript/JSX files (specified in webpack.config.js) necessary for MEGA chat.
+**bundle.js** / **bundle.*.js**: The libraries and custom JavaScript/JSX files necessary for MEGAchat.
+
+The architecture uses **Lazy Loading** (via React Suspense) to split the application into:
+1.  `bundle.js`: The lightweight entry point.
+2.  `bundle.*.js`: Lazy-loaded chunks (e.g., `bundle.call.js`, `bundle.contacts-panel.js`) loaded on-demand.
+
+Lazy chunk loading is intercepted by `megaChunkLoader` to route requests through `secureboot`'s `M.require()`; this
+ensures all chunks undergo strict XHR + SHA-256 hash verification before execution.
 
-> NB: This unobfuscated, unminified file is created with Webpack using:
+> NB: These unobfuscated, unminified files are created with Webpack using:
 >
 > ```bash
 > npm update && npm install --production && ./scripts/build.sh