Refactor: optimize notes covers rendering#356
Open
7eliassen wants to merge 3 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
neSpecc
reviewed
Jul 8, 2026
neSpecc
left a comment
neSpecc
left a comment
Member
There was a problem hiding this comment.
can we show cover skeleton while image is still loading?
There was a problem hiding this comment.
Pull request overview
This PR refactors homepage note cover loading to improve perceived performance by fetching note metadata first and then downloading cover images asynchronously, allowing covers to render progressively as they arrive.
Changes:
- Refactors
NoteListService.getNoteList()to return metadata only and introducesloadCover()for per-note cover fetching. - Adds background parallel cover downloading in
useNoteListand updates notes reactively as covers complete. - Updates
NoteList.vueto only pass blob URLs to theCardimage source.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/presentation/components/note-list/NoteList.vue | Only renders a cover when it’s a blob: URL (progressive rendering support). |
| src/domain/noteList.service.ts | Splits cover downloading into a dedicated loadCover() method and returns metadata-only lists. |
| src/application/services/useNoteList.ts | Adds background parallel cover loading and reactive per-item updates; updates lifecycle cleanup implications. |
Comments suppressed due to low confidence (1)
src/application/services/useNoteList.ts:155
covernow holds a server key until it’s replaced with ablob:URL. The unmount cleanup currently callsURL.revokeObjectURLfor any non-nullcover, which will include non-blob keys. Restrict revocation to actualblob:URLs so the cleanup only targets object URLs created byURL.createObjectURL.
loadCovers().catch(console.error);
};
/**
* Load first notes
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
75
to
83
| @@ -82,6 +82,47 @@ export default function (onlyCreatedByUser = false): UseNoteListComposableState | |||
| return list; | |||
| }; | |||
Comment on lines
+112
to
+122
| const url = await noteListService.loadCover(item.id, item.cover); | ||
|
|
||
| if (url !== null) { | ||
| /** | ||
| * Update the specific note's cover reactively so the card renders the image | ||
| */ | ||
| list.items[index] = { | ||
| ...item, | ||
| cover: url, | ||
| }; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refactor: optimize notes covers rendering
Problem
The homepage currently suffers from poor loading performance. The note list is not displayed until all cover images have finished downloading, causing significant delays — especially on slower connections.
Solution
Preview
Implementation Details
noteList.service.tsgetNoteList()now returns metadata only (cover downloads are excluded)loadCover()method for per-note asynchronous cover fetchinguseNoteList.tsloadCovers()which downloads all covers in parallel usingPromise.all()and updates each note reactively upon completionloadNextPage()triggersloadCovers()in the background after the list is rendered, ensuring a smooth user experiencePerformance Improvements
Tested on Linux in Firefox and Chrome
Home page loading (30 notes with covers):