perf(images): repaint one card on a favorite toggle instead of the collection
stream.updateItem tells onChange which item it patched, and the Images page then skips the full layout pass (computed style, grid metrics and layout over every loaded item) because no card changed size or place.
This commit is contained in:
@@ -165,7 +165,8 @@ export function createImageStream({ api, onChange = () => {}, batchSize = 40, re
|
||||
const next = withItem(state, key, patch);
|
||||
if (disposed || next === state) return false;
|
||||
state = next;
|
||||
onChange(state);
|
||||
// The hint names the one patched item, so a page can repaint it without laying out the collection again.
|
||||
onChange(state, {patch:key});
|
||||
return true;
|
||||
},
|
||||
dispose() {
|
||||
|
||||
@@ -435,9 +435,10 @@ export function mountImages(main, api, parentScope, {embedded = false, fetchPage
|
||||
// The concept's end of the collection (app.js updateImageContinuation).
|
||||
return `${next.loaded ? 'You’re all caught up' : 'No matching images'} · ${next.total.toLocaleString('en-US')} ${noun(next.total, 'image')}`;
|
||||
}
|
||||
function renderState(next) {
|
||||
function renderState(next, {patch} = {}) {
|
||||
const previous = state;
|
||||
const changed = state?.items !== next.items;
|
||||
// A patched item (a favorite) keeps every card's size and place; setFavorite repaints its card.
|
||||
const changed = !patch && state?.items !== next.items;
|
||||
if (changed) {
|
||||
if (!next.items.length) itemIndexes.clear();
|
||||
for (let index = state?.items.length || 0; index < next.items.length; index++) itemIndexes.set(imageKey(next.items[index]), index);
|
||||
|
||||
Reference in New Issue
Block a user