feat(frontend): cache Tags/Categories/Pools lists across section switches
The offset-paginated lists lost their loaded items, search text and scroll position when you left for another section, since search is local (not in the URL) and the page unmounts on navigation. Each now snapshots that state on departure and rehydrates it on return when the sort/order/search still match, restoring scroll after the list paints. Because these lists are edited on their own detail/new pages, the API client drops the matching section's snapshot on any successful mutation so a stale list never restores. Shared scroll-restore helper and an OffsetListSnapshot type keep the three pages in lockstep. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
// Reapply a restored scroll offset to a list's scroller, retrying across frames
|
||||
// because the list may not be laid out yet right after a cache rehydrate (and
|
||||
// SvelteKit resets scroll to the top on navigation, so this has to win after).
|
||||
export function restoreListScroll(getEl: () => HTMLElement | undefined, top: number): void {
|
||||
let tries = 12;
|
||||
const apply = () => {
|
||||
const el = getEl();
|
||||
if (!el) {
|
||||
if (tries-- > 0) requestAnimationFrame(apply);
|
||||
return;
|
||||
}
|
||||
if (el.scrollHeight > top + el.clientHeight || tries-- <= 0) {
|
||||
el.scrollTop = top;
|
||||
return;
|
||||
}
|
||||
requestAnimationFrame(apply);
|
||||
};
|
||||
requestAnimationFrame(apply);
|
||||
}
|
||||
@@ -10,6 +10,16 @@
|
||||
|
||||
export type SectionKey = 'files' | 'tags' | 'categories' | 'pools';
|
||||
|
||||
/** Snapshot shape shared by the offset-paginated lists (tags/categories/pools). */
|
||||
export interface OffsetListSnapshot<T> {
|
||||
/** sort|order|search at capture — guards against restoring a different query. */
|
||||
resetKey: string;
|
||||
search: string;
|
||||
items: T[];
|
||||
total: number;
|
||||
offset: number;
|
||||
}
|
||||
|
||||
interface Snapshot<T> {
|
||||
/** Scroll offset of the list's scroller at capture time. */
|
||||
scrollTop: number;
|
||||
|
||||
Reference in New Issue
Block a user