m4: perf pass — lazy-load note images
Light, audit-first perf pass (task 1870): - lazy-load + async-decode the card thumbnail and editor attachment images so an image-heavy board / large note doesn't eagerly fetch and decode every off-screen image up front Audit found the rest already in good shape and left as-is: all routes are code-split via dynamic import(); the titles index (palette, [[-autocomplete, wiki-link resolution) is cached in its store and only fetched once; board refetches are scoped to real view/label changes with no double-load on mount. (Server-side thumbnail generation — cards load full-res uploads — is a larger, separate feature, noted for later, out of scope for a light pass.) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm
This commit is contained in:
@@ -142,6 +142,8 @@ onBeforeUnmount(() => document.removeEventListener("mousedown", onDocMousedown))
|
||||
v-if="note.attachments.length"
|
||||
:src="note.attachments[0].url"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="mb-2 max-h-48 w-full cursor-pointer rounded-lg object-cover"
|
||||
@click="emit('open', note)"
|
||||
/>
|
||||
|
||||
@@ -264,7 +264,7 @@ async function act(fn: () => Promise<void>) {
|
||||
<div class="flex flex-col gap-2 p-4">
|
||||
<div v-if="liveNote.attachments.length" class="flex flex-wrap gap-2">
|
||||
<div v-for="att in liveNote.attachments" :key="att.id" class="group/att relative">
|
||||
<img :src="att.url" alt="" class="h-24 w-24 rounded-lg object-cover" />
|
||||
<img :src="att.url" alt="" loading="lazy" decoding="async" class="h-24 w-24 rounded-lg object-cover" />
|
||||
<button
|
||||
type="button"
|
||||
class="absolute right-1 top-1 rounded-full bg-black/50 px-1.5 text-white opacity-0 transition group-hover/att:opacity-100"
|
||||
|
||||
Reference in New Issue
Block a user