perf: implement chunked API loading to prevent fetching all notes on scroll

The previous implementation fetched all 3,633 note metadata records at once
on initial load, even though only 50 were displayed. When scrolling triggered
pagination, the UI would hang while processing all notes.

This change implements proper chunked loading using the existing backend
chunkSize and chunkCursor API parameters:

- Initial load fetches only first 50 notes
- Scrolling triggers incremental fetches of 50 notes at a time
- Cursor is stored in sync state to track pagination position
- Notes are updated incrementally using existing store actions

This prevents the UI hang and significantly improves performance for users
with large note collections.

Author: cbcoutinho

src/App.vue

@@ -130,36 +130,40 @@ export default {
 	},
 
 	methods: {
-		loadNotes() {
-			fetchNotes()
-				.then(data => {
-					if (data === null) {
-						// nothing changed
-						return
-					}
-					if (data && data.noteIds) {
-						this.error = false
-						// Route to default note (lastViewedNote not available with chunked API)
-						// Users will need to manually select a note
-						this.routeDefault(0)
-					} else if (this.loading.notes) {
-						// only show error state if not loading in background
-						this.error = data?.errorMessage || true
-					} else {
-						console.error('Server error while updating list of notes: ' + (data?.errorMessage || 'Unknown error'))
-					}
-				})
-				.catch((err) => {
+		async loadNotes() {
+			try {
+				// Load only the first chunk on initial load (50 notes)
+				// Subsequent chunks will be loaded on-demand when scrolling
+				const data = await fetchNotes(50, null)
+
+				if (data === null) {
+					// nothing changed (304 response)
+					return
+				}
+
+				if (data && data.noteIds) {
+					this.error = false
+					// Route to default note after first chunk
+					this.routeDefault(0)
+
+					// Store cursor for next chunk (will be used by scroll handler)
+					store.commit('setNotesChunkCursor', data.chunkCursor || null)
+				} else if (this.loading.notes) {
 					// only show error state if not loading in background
-					if (this.loading.notes) {
-						this.error = true
-					}
-					console.error('Failed to load notes:', err)
-				})
-				.then(() => {
-					this.loading.notes = false
-					this.startRefreshTimer(config.interval.notes.refresh)
-				})
+					this.error = data?.errorMessage || true
+				} else {
+					console.error('Server error while updating list of notes: ' + (data?.errorMessage || 'Unknown error'))
+				}
+			} catch (err) {
+				// only show error state if not loading in background
+				if (this.loading.notes) {
+					this.error = true
+				}
+				console.error('Failed to load notes:', err)
+			} finally {
+				this.loading.notes = false
+				this.startRefreshTimer(config.interval.notes.refresh)
+			}
 		},
 
 		startRefreshTimer(seconds) {

src/NotesService.js

@@ -73,7 +73,7 @@ export const getDashboardData = () => {
 		})
 }
 
-export const fetchNotes = async () => {
+export const fetchNotes = async (chunkSize = 50, chunkCursor = null) => {
 	const lastETag = store.state.sync.etag
 	const lastModified = store.state.sync.lastModified
 	const headers = {}
@@ -95,25 +95,39 @@ export const fetchNotes = async () => {
 			}
 		}
 
-		// Load ALL notes metadata excluding content for performance
+		// Load notes metadata in chunks excluding content for performance
 		// Content is loaded on-demand when user selects a note
 		const params = new URLSearchParams()
 		if (lastModified) {
 			params.append('pruneBefore', lastModified)
 		}
 		params.append('exclude', 'content') // Exclude heavy content field
+		params.append('chunkSize', chunkSize.toString()) // Request chunked data
+		if (chunkCursor) {
+			params.append('chunkCursor', chunkCursor) // Continue from previous chunk
+		}
 
 		const response = await axios.get(
 			generateUrl('/apps/notes/api/v1/notes' + (params.toString() ? '?' + params.toString() : '')),
 			{ headers },
 		)
 
-		// Process all notes - API v1 returns array directly
-		if (Array.isArray(response.data)) {
-			const notes = response.data
-			const noteIds = notes.map(note => note.id)
-
-			// Update all notes at once (content will be loaded on-demand)
+		const data = response.data
+		const notes = data.notes || []
+		const noteIds = data.noteIds || notes.map(note => note.id)
+		const nextCursor = data.chunkCursor || null
+		const isLastChunk = !nextCursor
+
+		// Update notes incrementally
+		if (chunkCursor) {
+			// Subsequent chunk - use incremental update
+			store.dispatch('updateNotesIncremental', { notes, isLastChunk })
+			if (isLastChunk) {
+				// Final chunk - clean up deleted notes
+				store.dispatch('finalizeNotesUpdate', noteIds)
+			}
+		} else {
+			// First chunk - use full update
 			store.dispatch('updateNotes', { noteIds, notes })
 		}
 
@@ -122,7 +136,11 @@ export const fetchNotes = async () => {
 		store.commit('setSyncLastModified', response.headers['last-modified'])
 		store.commit('setNotesLoadingInProgress', false)
 
-		return { noteIds: response.data.map(n => n.id) }
+		return {
+			noteIds,
+			chunkCursor: nextCursor,
+			isLastChunk,
+		}
 	} catch (err) {
 		store.commit('setNotesLoadingInProgress', false)
 		if (err?.response?.status === 304) {

src/components/NotesView.vue

@@ -68,6 +68,7 @@ import {
 	NcTextField,
 } from '@nextcloud/vue'
 import { categoryLabel } from '../Util.js'
+import { fetchNotes } from '../NotesService.js'
 import NotesList from './NotesList.vue'
 import NotesCaption from './NotesCaption.vue'
 import store from '../store.js'
@@ -207,28 +208,48 @@ export default {
 			}
 		},
 
-		onEndOfNotes(isVisible) {
+		async onEndOfNotes(isVisible) {
 			// Prevent rapid-fire loading by checking if we're already loading a batch
-			if (!isVisible || this.isLoadingMore || this.displayedNotesCount >= this.filteredNotes.length) {
+			if (!isVisible || this.isLoadingMore) {
 				return
 			}
 
 			// Set loading flag to prevent concurrent loads
 			this.isLoadingMore = true
 
-			// Use nextTick to ensure the loading flag is set before incrementing
-			this.$nextTick(() => {
-				// Load 50 more notes at a time
-				this.displayedNotesCount = Math.min(
-					this.displayedNotesCount + 50,
-					this.filteredNotes.length
-				)
+			try {
+				// Check if there are more notes to fetch from the server
+				const chunkCursor = store.state.sync.chunkCursor
 
-				// Reset loading flag after DOM update
+				if (chunkCursor) {
+					// Fetch next chunk from the API
+					const data = await fetchNotes(50, chunkCursor)
+
+					if (data && data.noteIds) {
+						// Update cursor for next fetch
+						store.commit('setNotesChunkCursor', data.chunkCursor || null)
+
+						// Increment display count to show newly loaded notes
+						this.displayedNotesCount = Math.min(
+							this.displayedNotesCount + 50,
+							this.filteredNotes.length
+						)
+					}
+				} else if (this.displayedNotesCount < this.filteredNotes.length) {
+					// No more chunks to fetch, but we have cached notes to display
+					this.$nextTick(() => {
+						this.displayedNotesCount = Math.min(
+							this.displayedNotesCount + 50,
+							this.filteredNotes.length
+						)
+					})
+				}
+			} finally {
+				// Reset loading flag after operation completes
 				this.$nextTick(() => {
 					this.isLoadingMore = false
 				})
-			})
+			}
 		},
 
 		onCategorySelected(category) {

src/store/sync.js

@@ -10,6 +10,7 @@ const state = {
 	etag: null,
 	lastModified: 0,
 	active: false,
+	chunkCursor: null,
 	// TODO add list of notes with changes during sync
 }
 
@@ -43,11 +44,16 @@ const mutations = {
 	clearSyncCache(state) {
 		state.etag = null
 		state.lastModified = 0
+		state.chunkCursor = null
 	},
 
 	setSyncActive(state, active) {
 		state.active = active
 	},
+
+	setNotesChunkCursor(state, cursor) {
+		state.chunkCursor = cursor
+	},
 }
 
 const actions = {