perf(settings): lazy load sub-settings pages to optimize load time

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");

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 (
 		<div className="note">

src/settings/mainSettings.js

@@ -328,13 +328,47 @@ 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 (!(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: false,
+		});
+	}
 }