diff --git a/packages/app-desktop/gui/NoteList/NoteList2.tsx b/packages/app-desktop/gui/NoteList/NoteList2.tsx index 9f240e278f..d731d47a2f 100644 --- a/packages/app-desktop/gui/NoteList/NoteList2.tsx +++ b/packages/app-desktop/gui/NoteList/NoteList2.tsx @@ -173,7 +173,7 @@ const NoteList = (props: Props) => { const renderFiller = (key: string, style: React.CSSProperties) => { if (!props.notes.length) return null; - if (style.height <= 0) return null; + if (style.height as number <= 0) return null; return
; }; diff --git a/packages/app-desktop/gui/NoteList/utils/prepareViewProps.ts b/packages/app-desktop/gui/NoteList/utils/prepareViewProps.ts index 5052501b27..18413576d2 100644 --- a/packages/app-desktop/gui/NoteList/utils/prepareViewProps.ts +++ b/packages/app-desktop/gui/NoteList/utils/prepareViewProps.ts @@ -1,6 +1,7 @@ import { ListRendererDepependency } from './types'; import { NoteEntity } from '@joplin/lib/services/database/types'; import { Size } from '@joplin/utils/types'; +import Note from '@joplin/lib/models/Note'; const prepareViewProps = async (dependencies: ListRendererDepependency[], note: NoteEntity, itemSize: Size, selected: boolean, itemIndex: number, noteTitleHtml: string, noteIsWatched: boolean) => { const output: any = {}; @@ -17,6 +18,12 @@ const prepareViewProps = async (dependencies: ListRendererDepependency[], note: } else if (dep === 'note.isWatched') { output.note.isWatched = noteIsWatched; } else { + // The notes in the state only contain the properties defined in + // Note.previewFields(). It means that if a view request a + // property not present there, we need to load the full note. + // One such missing property is the note body, which we don't + // load by default. + if (!(propName in note)) note = await Note.load(note.id); if (!(propName in note)) throw new Error(`Invalid dependency name: ${dep}`); output.note[propName] = (note as any)[propName]; } diff --git a/packages/app-desktop/gui/NoteList/utils/useRenderedNotes.ts b/packages/app-desktop/gui/NoteList/utils/useRenderedNotes.ts index 512a1137ee..9194901686 100644 --- a/packages/app-desktop/gui/NoteList/utils/useRenderedNotes.ts +++ b/packages/app-desktop/gui/NoteList/utils/useRenderedNotes.ts @@ -23,14 +23,16 @@ const useRenderedNotes = (startNoteIndex: number, endNoteIndex: number, notes: N const [renderedNotes, setRenderedNotes] = useState>({}); useAsyncEffect(async (event) => { - const noteIds = notes.filter((_value, index) => { - return index >= startNoteIndex && index <= endNoteIndex; - }).map(note => note.id); - - const fullNotes = await Note.loadItemsByIds(noteIds); if (event.cancelled) return; const renderNote = async (note: NoteEntity, noteIndex: number): Promise => { + const viewHash = hashContent({ + ...listRenderer.dependencies, + updated_time: note.updated_time, + }); + + if (renderedNotes[note.id] && renderedNotes[note.id].hash === viewHash) return null; + const titleHtml = getNoteTitleHtml(highlightedWords, Note.displayTitle(note)); const viewProps = await prepareViewProps( listRenderer.dependencies, @@ -45,8 +47,6 @@ const useRenderedNotes = (startNoteIndex: number, endNoteIndex: number, notes: N if (event.cancelled) return null; - const viewHash = hashContent(view); - setRenderedNotes(prev => { if (prev[note.id] && prev[note.id].hash === viewHash) return prev; @@ -63,12 +63,12 @@ const useRenderedNotes = (startNoteIndex: number, endNoteIndex: number, notes: N const promises: Promise[] = []; - for (let i = 0; i < fullNotes.length; i++) { - promises.push(renderNote(fullNotes[i], i)); + for (let i = startNoteIndex; i <= endNoteIndex; i++) { + promises.push(renderNote(notes[i], i)); } await Promise.all(promises); - }, [startNoteIndex, endNoteIndex, notes, selectedNoteIds, itemSize, listRenderer, watchedNoteFiles]); + }, [startNoteIndex, endNoteIndex, notes, selectedNoteIds, itemSize, listRenderer, renderedNotes, watchedNoteFiles]); return renderedNotes; };