diff --git a/.jules/bolt.md b/.jules/bolt.md new file mode 100644 index 0000000..44adc1f --- /dev/null +++ b/.jules/bolt.md @@ -0,0 +1,3 @@ +## 2025-05-15 - [Initial Bottleneck Hunting] +**Learning:** Found a performance anti-pattern in IndexedDB usage where multiple notes are saved individually, creating N separate transactions instead of one. Also noticed that PBKDF2 is used per note with unique salts, which is secure but expensive during initial load. +**Action:** Implement a bulk save function for IndexedDB to use a single transaction when loading multiple notes from the server. diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b284002..0f3ca08 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -135,7 +135,6 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -485,7 +484,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -529,7 +527,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -1721,7 +1718,8 @@ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@types/babel__core": { "version": "7.20.5", @@ -1806,7 +1804,6 @@ "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -1817,7 +1814,6 @@ "integrity": "sha512-p/jUvulfgU7oKtj6Xpk8cA2Y1xKTtICGpJYeJXz2YVO2UcvjQgeRMLDGfDeqeRW2Ta+0QNFwcc8X3GH8SxZz6w==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1828,7 +1824,6 @@ "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "dev": true, "license": "MIT", - "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -1885,7 +1880,6 @@ "integrity": "sha512-lJi3PfxVmo0AkEY93ecfN+r8SofEqZNGByvHAI3GBLrvt1Cw6H5k1IM02nSzu0RfUafr2EvFSw0wAsZgubNplQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.47.0", "@typescript-eslint/types": "8.47.0", @@ -2249,7 +2243,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2300,6 +2293,7 @@ "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=8" } @@ -2418,7 +2412,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -2653,7 +2646,8 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/electron-to-chromium": { "version": "1.5.255", @@ -2753,7 +2747,6 @@ "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3352,7 +3345,6 @@ "integrity": "sha512-454TI39PeRDW1LgpyLPyURtB4Zx1tklSr6+OFOipsxGUH1WMTvk6C65JQdrj455+DP2uJ1+veBEHTGFKWVLFoA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@acemir/cssom": "^0.9.23", "@asamuzakjp/dom-selector": "^6.7.4", @@ -3497,6 +3489,7 @@ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "lz-string": "bin/bin.js" } @@ -3773,6 +3766,7 @@ "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -3788,6 +3782,7 @@ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=10" }, @@ -3831,7 +3826,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -3841,7 +3835,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -3854,14 +3847,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/react-redux": { "version": "9.2.0", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", "license": "MIT", - "peer": true, "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" @@ -3946,8 +3939,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/redux-thunk": { "version": "3.1.0", @@ -4258,7 +4250,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -4367,7 +4358,6 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -4463,7 +4453,6 @@ "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -4557,7 +4546,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -4824,7 +4812,6 @@ "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/frontend/src/intents/notesIntents.ts b/frontend/src/intents/notesIntents.ts index c6665cb..7af9b74 100644 --- a/frontend/src/intents/notesIntents.ts +++ b/frontend/src/intents/notesIntents.ts @@ -7,6 +7,7 @@ import { apiClient } from '../services/api'; import { encrypt, decrypt } from '../services/encryption'; import { saveNoteToDB, + saveNotesToDB, getNotesFromDB, deleteNoteFromDB, addToSyncQueue as addToSyncQueueDB, @@ -82,10 +83,8 @@ export const loadNotesIntent = createAsyncThunk( }) ); - // Save to IndexedDB - for (const note of decryptedNotes) { - await saveNoteToDB(note); - } + // Save to IndexedDB (optimized bulk save) + await saveNotesToDB(decryptedNotes); dispatch(setNotes(decryptedNotes)); dispatch(setLoading(false)); diff --git a/frontend/src/services/__tests__/offline.test.ts b/frontend/src/services/__tests__/offline.test.ts new file mode 100644 index 0000000..8b0d550 --- /dev/null +++ b/frontend/src/services/__tests__/offline.test.ts @@ -0,0 +1,77 @@ +/** + * Unit tests for offline service + */ + +import { describe, it, expect, beforeEach, vi } from 'vitest'; +import { saveNoteToDB, saveNotesToDB, getNotesFromDB } from '../offline'; +import type { Note } from '../../models/types'; + +// Mock the idb openDB +vi.mock('idb', () => ({ + openDB: vi.fn(), +})); + +import { openDB } from 'idb'; + +describe('Offline Service', () => { + const mockNote: Note = { + id: '1', + title: 'Test Note', + content: 'Test Content', + createdAt: new Date().toISOString(), + updatedAt: new Date().toISOString(), + }; + + const mockDb = { + put: vi.fn(), + getAll: vi.fn(), + transaction: vi.fn(), + }; + + const mockStore = { + put: vi.fn(), + clear: vi.fn(), + }; + + const mockTx = { + objectStore: vi.fn(() => mockStore), + done: Promise.resolve(), + }; + + beforeEach(() => { + vi.clearAllMocks(); + vi.mocked(openDB).mockResolvedValue(mockDb as any); + mockDb.transaction.mockReturnValue(mockTx as any); + }); + + it('should save a single note', async () => { + await saveNoteToDB(mockNote); + expect(mockDb.put).toHaveBeenCalledWith('notes', mockNote); + }); + + it('should save multiple notes in a single transaction', async () => { + const notes = [mockNote, { ...mockNote, id: '2' }]; + await saveNotesToDB(notes); + + expect(mockDb.transaction).toHaveBeenCalledTimes(1); + expect(mockDb.transaction).toHaveBeenCalledWith('notes', 'readwrite'); + expect(mockTx.objectStore).toHaveBeenCalledWith('notes'); + expect(mockStore.put).toHaveBeenCalledTimes(2); + expect(mockStore.put).toHaveBeenCalledWith(notes[0]); + expect(mockStore.put).toHaveBeenCalledWith(notes[1]); + }); + + it('should get all notes', async () => { + const notes = [mockNote]; + mockDb.getAll.mockResolvedValue(notes); + + const result = await getNotesFromDB(); + expect(result).toEqual(notes); + expect(mockDb.getAll).toHaveBeenCalledWith('notes'); + }); + + it('should return early if saving empty notes array', async () => { + await saveNotesToDB([]); + expect(mockDb.transaction).not.toHaveBeenCalled(); + }); +}); diff --git a/frontend/src/services/offline.ts b/frontend/src/services/offline.ts index c8d4df8..a4091b0 100644 --- a/frontend/src/services/offline.ts +++ b/frontend/src/services/offline.ts @@ -51,6 +51,21 @@ export async function saveNoteToDB(note: Note): Promise { await database.put('notes', note); } +/** + * Save multiple notes to IndexedDB in a single transaction + * Optimization: Using a single transaction is much faster than multiple individual puts + */ +export async function saveNotesToDB(notes: Note[]): Promise { + if (notes.length === 0) return; + const database = await initDB(); + const tx = database.transaction('notes', 'readwrite'); + const store = tx.objectStore('notes'); + for (const note of notes) { + store.put(note); + } + await tx.done; +} + /** * Get all notes from IndexedDB */