134 lines
3.9 KiB
TypeScript
134 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* VirtualPostGrid — window-virtualised, infinite-scroll 2-up thumbnail grid for
|
|
* the profile Posts tabs (/u/me and /u/[handle]).
|
|
*
|
|
* Mirrors HomeFeed's window virtualization, but the unit of virtualization is a
|
|
* GRID ROW (two square cards) rather than a single card. Data (keyset paging +
|
|
* the bottom sentinel) comes from usePostScrollFeed; this component only owns
|
|
* rendering + windowing, so a profile with hundreds of posts stays cheap.
|
|
*/
|
|
|
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { useWindowVirtualizer } from "@tanstack/react-virtual";
|
|
import { Loader2 } from "lucide-react";
|
|
import type { Post } from "@/lib/social";
|
|
import { PostGridCard } from "./post-grid-card";
|
|
|
|
const COLS = 2;
|
|
|
|
export function VirtualPostGrid({
|
|
posts,
|
|
loading,
|
|
hasMore,
|
|
sentinelRef,
|
|
emptyMessage,
|
|
hrefFor,
|
|
onDelete,
|
|
onUpdated,
|
|
}: {
|
|
posts: Post[];
|
|
loading: boolean;
|
|
hasMore: boolean;
|
|
/** Bottom sentinel observed by usePostScrollFeed to load the next page. */
|
|
sentinelRef: React.RefObject<HTMLDivElement | null>;
|
|
emptyMessage?: string;
|
|
hrefFor?: (post: Post) => string;
|
|
onDelete?: (id: string) => void;
|
|
onUpdated?: (updated: Post) => void;
|
|
}) {
|
|
// Chunk the flat post list into rows of COLS for row-level virtualization.
|
|
const rows = useMemo(() => {
|
|
const out: Post[][] = [];
|
|
for (let i = 0; i < posts.length; i += COLS) out.push(posts.slice(i, i + COLS));
|
|
return out;
|
|
}, [posts]);
|
|
|
|
// Document-absolute top of the grid, so the window virtualizer can map window
|
|
// scroll → visible rows (the profile header/tabs sit above us). Re-measured
|
|
// on resize and any body reflow. Same approach as HomeFeed.
|
|
const parentRef = useRef<HTMLDivElement>(null);
|
|
const [offsetTop, setOffsetTop] = useState(0);
|
|
useEffect(() => {
|
|
const measure = () => {
|
|
const el = parentRef.current;
|
|
if (el) setOffsetTop(el.getBoundingClientRect().top + window.scrollY);
|
|
};
|
|
measure();
|
|
window.addEventListener("resize", measure);
|
|
const ro = new ResizeObserver(measure);
|
|
ro.observe(document.body);
|
|
return () => {
|
|
window.removeEventListener("resize", measure);
|
|
ro.disconnect();
|
|
};
|
|
}, []);
|
|
|
|
const virtualizer = useWindowVirtualizer({
|
|
count: rows.length,
|
|
estimateSize: () => 240, // square card + gap; measureElement corrects it
|
|
overscan: 6,
|
|
scrollMargin: offsetTop,
|
|
});
|
|
|
|
if (loading && posts.length === 0) {
|
|
return (
|
|
<div className="flex justify-center py-16">
|
|
<Loader2 className="size-6 animate-spin text-muted-foreground" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!loading && posts.length === 0) {
|
|
return (
|
|
<p className="text-sm text-muted-foreground">
|
|
{emptyMessage ?? "Nothing here yet."}
|
|
</p>
|
|
);
|
|
}
|
|
|
|
const virtualRows = virtualizer.getVirtualItems();
|
|
|
|
return (
|
|
<div>
|
|
<div
|
|
ref={parentRef}
|
|
className="relative w-full"
|
|
style={{ height: virtualizer.getTotalSize() }}
|
|
>
|
|
{virtualRows.map((vr) => {
|
|
const row = rows[vr.index];
|
|
return (
|
|
<div
|
|
key={row[0]?.id ?? vr.index}
|
|
data-index={vr.index}
|
|
ref={virtualizer.measureElement}
|
|
className="absolute left-0 top-0 w-full"
|
|
style={{ transform: `translateY(${vr.start - offsetTop}px)` }}
|
|
>
|
|
<div className="grid grid-cols-2 gap-2 sm:gap-3 pb-2 sm:pb-3">
|
|
{row.map((p) => (
|
|
<PostGridCard
|
|
key={p.id}
|
|
post={p}
|
|
href={hrefFor?.(p)}
|
|
onDelete={onDelete}
|
|
onUpdated={onUpdated}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{hasMore ? (
|
|
<div ref={sentinelRef} className="flex justify-center py-6">
|
|
<Loader2 className="size-5 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|