⚡ Bolt: Optimize IndexedDB storage with bulk save

.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.

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

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();
+  });
+});

frontend/src/services/offline.ts

@@ -51,6 +51,21 @@ export async function saveNoteToDB(note: Note): Promise<void> {
   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<void> {
+  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
  */