perf: improve performance for large database

docs/debugging.md

@@ -0,0 +1,6 @@
+## Debugging in browser
+
+To run app in browser mode:
+- run `npm run serve --workspace app`
+- go to http://localhost:8080/window-main.html
+- open console and enable IDB storage via command `localStorage.storageType = 'idb'`

packages/app/package.json

@@ -76,7 +76,7 @@
 		"copy-webpack-plugin": "^13.0.1",
 		"cross-env": "^10.1.0",
 		"css-loader": "^7.1.3",
-		"electron": "^39.8.2",
+		"electron": "^44.4.5",
 		"electron-devtools-installer": "^4.0.0",
 		"fork-ts-checker-webpack-plugin": "^9.1.0",
 		"html-webpack-plugin": "^5.6.6",

packages/app/src/__tests__/utils/fs.ts

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-base-to-string */
+import { vol } from 'memfs';
+
+export const readdir = (path: string) =>
+	vol
+		.readdirSync(path, { recursive: true })
+		.sort((a, b) => String(a).localeCompare(String(b)));

packages/app/src/core/database/ManagedDatabase.ts

@@ -44,6 +44,15 @@ export type Options = {
 	};
 };
 
+const requestRunOnIdle = (cb: () => void, deadline: number) => {
+	if (typeof globalThis.requestIdleCallback === 'function') {
+		globalThis.requestIdleCallback(cb, { timeout: deadline });
+		return;
+	}
+
+	setTimeout(cb, 0);
+};
+
 /**
  * Class to manage database data synchronization
  */
@@ -61,9 +70,14 @@ export class ManagedDatabase<T> implements IManagedDatabase<T> {
 		this.dbFile = dbFile;
 
 		// Auto sync changes
-		this.debouncedSync = debounce(this.sync, {
-			wait: sync.delay,
-		});
+		this.debouncedSync = debounce(
+			() => {
+				requestRunOnIdle(() => this.sync(), sync.deadline);
+			},
+			{
+				wait: sync.delay,
+			},
+		);
 
 		this.cleanups.push(dbContainer.onChanged.watch(this.debouncedSync));
 	}