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,11 +21,12 @@ 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
 *.xml
 js/chat/emojidata/emojis.json
 eslint-local-rules.js
 Gruntfile.js
+webpack.config.js

.eslintrc.json

@@ -297,6 +297,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;
@@ -1609,9 +1636,6 @@ body.theme-dark .lhp-container .lhp-filter-tag {
   background: #222;
   z-index: 120;
   transition: width 200ms ease-in-out;
-  /**
-  * Sidebar controls
-   */
 }
 .meetings-call.minimized {
   display: none;
@@ -1812,7 +1836,6 @@ body.theme-dark .lhp-container .lhp-filter-tag {
   grid-template-columns: 1fr 1fr;
   grid-gap: 8px;
   width: 100%;
-  /* TODO: look into `.video-node` re: replicate and unify */
 }
 @media only screen and (max-height: 760px) {
   .meetings-call .stream .stream-participants-block .participants-container .participants-grid {
@@ -1854,6 +1877,9 @@ body.theme-dark .lhp-container .lhp-filter-tag {
 .meetings-call .stream .stream-participants-block .participants-container .participants-grid .local-stream-node .node-menu-content button span {
   padding: 0 0 0 10px;
 }
+.meetings-call .stream .stream-participants-block .participants-container .participants-grid {
+  /* TODO: look into `.video-node` re: replicate and unify */
+}
 .meetings-call .stream .stream-participants-block .participants-container .participants-grid .video-node {
   width: 100%;
   height: 100%;
@@ -2346,6 +2372,11 @@ body.theme-dark .lhp-container .lhp-filter-tag {
   padding: 0;
   margin-inline-start: 4px;
 }
+.meetings-call {
+  /**
+  * Sidebar controls
+   */
+}
 .meetings-call .sidebar-controls {
   display: flex;
   justify-content: flex-end;
@@ -2771,11 +2802,13 @@ body.theme-dark .lhp-container .lhp-filter-tag {
 .meetings-call .sidebar-wrapper .sidebar .participants-empty {
   margin: 20px;
   text-align: center;
-  /* TODO: move to sprite sheet */
 }
 .meetings-call .sidebar-wrapper .sidebar .participants-empty h3 {
   margin: 8px 0 0 0;
 }
+.meetings-call .sidebar-wrapper .sidebar .participants-empty {
+  /* TODO: move to sprite sheet */
+}
 .meetings-call .sidebar-wrapper .sidebar .participants-empty span.empty-check-icon {
   display: block;
   width: 84px;
@@ -3895,9 +3928,6 @@ body.theme-dark .start-meeting-preview .preview-meeting {
   height: 100%;
   background: var(--surface-grey-1);
   z-index: 141;
-  /* --- */
-  /* TODO: unify w/ `Join` */
-  /* --- */
 }
 .waiting-room--await, .waiting-room--redirect {
   justify-content: center;
@@ -3909,6 +3939,10 @@ body.theme-dark .start-meeting-preview .preview-meeting {
 .waiting-room--chatlink-landing .waiting-room-head {
   margin: 80px 0 0;
 }
+.waiting-room {
+  /* --- */
+  /* TODO: unify w/ `Join` */
+}
 .waiting-room-head {
   /* [...] */
 }
@@ -3932,6 +3966,9 @@ body.theme-dark .start-meeting-preview .preview-meeting {
     margin-bottom: 18px;
   }
 }
+.waiting-room {
+  /* --- */
+}
 .waiting-room .card {
   /* [...] */
 }
@@ -4576,8 +4613,6 @@ body.theme-dark .meetings-recurring-navigation .mega-button.recurring-nav-button
 }
 .meetings-recurring-content {
   /* [...] */
-  /* --- */
-  /* --- */
 }
 .meetings-recurring-content .mega-button.recurring-toggle-button {
   width: 36px;
@@ -4592,6 +4627,9 @@ body.theme-dark .meetings-recurring-navigation .mega-button.recurring-nav-button
 body.theme-dark .meetings-recurring-content .mega-button.recurring-toggle-button.active {
   color: black;
 }
+.meetings-recurring-content {
+  /* --- */
+}
 .meetings-recurring-content .recurring-field-row {
   display: flex;
   align-items: center;
@@ -4645,6 +4683,9 @@ body.theme-dark .meetings-recurring-content .mega-button.recurring-toggle-button
 .meetings-recurring-content .recurring-field-row .recurring-radio-buttons .meetings-datepicker .datepicker-input {
   margin-top: -8px;
 }
+.meetings-recurring-content {
+  /* --- */
+}
 .meetings-recurring-content .meetings-recurring-daily {
   /* [...] */
 }

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