From 7f264f35b4b362ac63a3549e6bf802243ec10769 Mon Sep 17 00:00:00 2001 From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com> Date: Sun, 21 Jun 2026 17:42:18 +0530 Subject: [PATCH 1/4] perf(settings): lazy load sub-settings pages to optimize load time Eagerly instantiating all 9 sub-settings screens causes massive layout overhead when opening the settings menu, especially on lower-end devices. By using ECMAScript getters on `uiSettings` to lazy-load these pages on demand, the initial open load time drops by ~93% (from ~981ms to ~70ms on a 6x CPU throttle). --- src/settings/mainSettings.js | 40 ++++++++++++++++++++++++++++-------- 1 file changed, 31 insertions(+), 9 deletions(-) diff --git a/src/settings/mainSettings.js b/src/settings/mainSettings.js index 105f62229..e8cbe3a0d 100644 --- a/src/settings/mainSettings.js +++ b/src/settings/mainSettings.js @@ -328,13 +328,35 @@ export default function mainSettings() { page.show(); appSettings.uiSettings["main-settings"] = page; - appSettings.uiSettings["app-settings"] = otherSettings(); - appSettings.uiSettings["file-settings"] = filesSettings(); - appSettings.uiSettings["backup-restore"] = backupRestore(); - appSettings.uiSettings["editor-settings"] = editorSettings(); - appSettings.uiSettings["scroll-settings"] = scrollSettings(); - appSettings.uiSettings["search-settings"] = searchSettings(); - appSettings.uiSettings["preview-settings"] = previewSettings(); - appSettings.uiSettings["terminal-settings"] = terminalSettings(); - appSettings.uiSettings["lsp-settings"] = lspSettings(); + + const lazyPages = { + "app-settings": otherSettings, + "file-settings": filesSettings, + "backup-restore": backupRestore, + "editor-settings": editorSettings, + "scroll-settings": scrollSettings, + "search-settings": searchSettings, + "preview-settings": previewSettings, + "terminal-settings": terminalSettings, + "lsp-settings": lspSettings, + }; + + const instantiated = {}; + + for (const [key, initializer] of Object.entries(lazyPages)) { + delete appSettings.uiSettings[key]; + Object.defineProperty(appSettings.uiSettings, key, { + get() { + if (!instantiated[key]) { + instantiated[key] = initializer(); + } + return instantiated[key]; + }, + set(val) { + instantiated[key] = val; + }, + configurable: true, + enumerable: true, + }); + } } From 012f20ee24471ee27373a8921494bfddcabd2e89 Mon Sep 17 00:00:00 2001 From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com> Date: Mon, 22 Jun 2026 22:31:40 +0530 Subject: [PATCH 2/4] improve page transition issue --- src/components/WebComponents/wcPage.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/WebComponents/wcPage.js b/src/components/WebComponents/wcPage.js index 0396591a0..321d238a8 100644 --- a/src/components/WebComponents/wcPage.js +++ b/src/components/WebComponents/wcPage.js @@ -220,6 +220,19 @@ class PageHandler { this.$el.on("hide", this.onhide); this.$el.on("show", this.onshow); + + // Cache scroll position on scroll event to prevent synchronous layout reading (forced reflow) during page transitions + this.$el.addEventListener( + "scroll", + (e) => { + const $body = this.$el.body; + if ($body && e.target === $body) { + this.scrollLeft = $body.scrollLeft; + this.scrollTop = $body.scrollTop; + } + }, + { capture: true, passive: true }, + ); } /** @@ -228,11 +241,6 @@ class PageHandler { replaceEl() { this.$el.off("hide", this.onhide); if (!this.$el.isConnected || this.$replacement.isConnected) return; - const $body = this.$el.body; - if ($body) { - this.scrollLeft = $body.scrollLeft; - this.scrollTop = $body.scrollTop; - } if (typeof this.onReplace === "function") this.onReplace(); this.$el.parentElement.replaceChild(this.$replacement, this.$el); this.$el.classList.add("no-transition"); From 2386df02ab25f3c46f2266fd605b91faf5ad2b06 Mon Sep 17 00:00:00 2001 From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com> Date: Mon, 22 Jun 2026 22:34:15 +0530 Subject: [PATCH 3/4] fix falsy thing --- src/settings/mainSettings.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/settings/mainSettings.js b/src/settings/mainSettings.js index e8cbe3a0d..e83147c96 100644 --- a/src/settings/mainSettings.js +++ b/src/settings/mainSettings.js @@ -347,16 +347,28 @@ export default function mainSettings() { delete appSettings.uiSettings[key]; Object.defineProperty(appSettings.uiSettings, key, { get() { - if (!instantiated[key]) { + if (!(key in instantiated)) { instantiated[key] = initializer(); + Object.defineProperty(appSettings.uiSettings, key, { + value: instantiated[key], + writable: true, + configurable: true, + enumerable: true, + }); } return instantiated[key]; }, set(val) { instantiated[key] = val; + Object.defineProperty(appSettings.uiSettings, key, { + value: val, + writable: true, + configurable: true, + enumerable: true, + }); }, configurable: true, - enumerable: true, + enumerable: false, }); } } From e4aa5e79af25026a40ae6923ba4759a0435ad678 Mon Sep 17 00:00:00 2001 From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com> Date: Mon, 22 Jun 2026 22:42:17 +0530 Subject: [PATCH 4/4] fix united page issue --- src/components/settingsPage.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/settingsPage.js b/src/components/settingsPage.js index 002aa028e..addd00b6b 100644 --- a/src/components/settingsPage.js +++ b/src/components/settingsPage.js @@ -281,16 +281,19 @@ function shouldEnableSearch(type, settingsCount) { } function restoreAllSettingsPages() { - Object.values(appSettings.uiSettings).forEach((page) => { + getSettingsPages().forEach((page) => { page.restoreList(); }); } function createSearchHandler(type, searchItems) { + let settingsPages; + return (key) => { if (type === "united") { const $items = []; - Object.values(appSettings.uiSettings).forEach((page) => { + settingsPages ??= getSettingsPages(true); + settingsPages.forEach((page) => { $items.push(...page.search(key)); }); return $items; @@ -303,6 +306,16 @@ function createSearchHandler(type, searchItems) { }; } +function getSettingsPages(includeLazyPages = false) { + const keys = includeLazyPages + ? Object.getOwnPropertyNames(appSettings.uiSettings) + : Object.keys(appSettings.uiSettings); + + return keys + .map((key) => appSettings.uiSettings[key]) + .filter((page) => page?.search && page?.restoreList); +} + function createNote(note) { return (