fix(library): lay out a loaded page of prompts without waiting for an animation frame (#443)

A starved renderer (headless WebKit under CPU load, a background tab) can
hold requestAnimationFrame for seconds. The shelf laid out each loaded page
only in its next frame, so the grid stayed empty after the first load or a
delete's reload while the caption already showed the new count. A loaded
batch is now laid out at once; measurements still flush per frame.

The regression test holds every animation frame and fails before the fix.
This commit is contained in:
Vito Sansevero
2026-10-28 20:45:24 -07:00
parent 4186c9a053
commit d9988f246a
2 changed files with 27 additions and 1 deletions
@@ -116,6 +116,29 @@ test('an archived prompt\'s page says so and restores it from its notice',async(
expect(byText(await items(request),'Cat portrait')?.id).toBe(cat.id);
});
// #443: a starved renderer (headless WebKit under CPU load, a background tab) can hold animation frames for
// seconds; a loaded page of prompts is shown without waiting for one, on first load and after a delete.
async function holdAnimationFrames(page) {
await page.addInitScript(()=>{
const request=window.requestAnimationFrame.bind(window),cancel=window.cancelAnimationFrame.bind(window);
const held=new Map(),real=new Map();let holding=true,next=0;
window.requestAnimationFrame=callback=>{const id=--next;if(holding)held.set(id,callback);else real.set(id,request(callback));return id;};
window.cancelAnimationFrame=id=>{held.delete(id);if(real.has(id))cancel(real.get(id));real.delete(id);};
window.__releaseAnimationFrames=()=>{holding=false;for(const [id,callback] of held)real.set(id,request(callback));held.clear();};
});
}
test('a held animation frame does not hide the loaded prompts, on first load or after a delete',async({page,request})=>{
const before=await items(request);const dog=byText(before,'Dog landscape');
await holdAnimationFrames(page);
await page.goto(route);await expect(cards(page)).toHaveCount(before.length);
await box(page,dog.id).check();await openReview(page);
await review(page).getByRole('button',{name:'Delete 1 prompt',exact:true}).click();
await expect(toast(page)).toHaveText(/^Deleted 1 prompt\./);
await expect(cards(page)).toHaveCount(before.length-1);await expect(card(page,dog.id)).toHaveCount(0);
await page.evaluate(()=>window.__releaseAnimationFrames());
await expect(cards(page)).toHaveCount(before.length-1);
});
test('a double press sends one preview, and the bar holds while it is reviewed',async({page,request})=>{
const dog=byText(await items(request),'Dog landscape');
const previews=recordPosts(page,PREVIEW);
+4 -1
View File
@@ -412,7 +412,10 @@ export function mountLibrary(main,api,parentScope,{positiveId,savedState=null,on
const hidden=hiddenSave!==null && !next.loading && !next.error && !next.hasMore && !next.items.some(item=>item.id===hiddenSave)?' The saved prompt is hidden by the current filters.':'';
message.textContent=(next.error?'Prompt library could not be loaded. Retry.':next.loading?'Loading prompt library…':!next.items.length?empty:!next.hasMore?'You’re all caught up.':'')+hidden;
message.setAttribute('role',next.error?'alert':'status');retry.hidden=!next.error;more.hidden=!next.hasMore || !!next.error;more.setAttribute('aria-disabled',String(next.loading));
schedule();scheduleLoad();
// #443: a loaded page is laid out now, not on the next frame: a starved renderer (a background tab, headless
// WebKit under load) can hold frames for seconds, which left a loaded shelf empty. Measurements still flush per frame.
if(batch && grid.isConnected) {cancelAnimationFrame(frame);flush();} else schedule();
scheduleLoad();
}
const stream=createLibraryStream({api,onChange:render,restore:restorable?{filters,state:restorable.state}:undefined});
function maybeLoad() {