Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix blog post list staying invisible after re-filtering categories

Browse Source 
RevealGroup's whileInView fires once per component instance. Since a
category-filter navigation re-renders the same /blog page in place
(only searchParams changes, no full remount), and rest.length stays
> 0 across most filter transitions, RevealGroup itself never
naturally unmounts — so once it already fired "show" for one
filter's list, newly swapped-in RevealItems (different post ids)
mounted into an already-settled parent with no reason to re-fire the
reveal trigger, staying stuck at opacity 0 forever. Keying
RevealGroup (and the featured Reveal) on the actual rendered post
set forces a remount whenever the filtered posts change, restarting
the viewport tracking each time.
This commit is contained in:
Marco
2026-08-01 06:29:53 +00:00
parent e49dacf057
commit f95feafb1a
1 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/blog/page.tsx
+22 -2
View File
@@ -109,7 +109,11 @@ export default async function BlogOverviewPage({
// -mt-8, not pt-10 — pulls the card up to slightly overlap the
// hero section's bottom edge instead of sitting flush below it.
// relative z-10 keeps it stacked above the hero's own photo.
<Reveal delay={0.1} className="relative z-10 w-full px-[var(--layout-padding-x)] -mt-8 pb-4">
// key'd for the same reason as RevealGroup below — guards against
// the same stuck-at-opacity-0 failure mode if a future filter
// combination ever swaps in a *different* featured post without
// an intervening moment where `featured` was falsy.
<Reveal key={featured.id} delay={0.1} className="relative z-10 w-full px-[var(--layout-padding-x)] -mt-8 pb-4">
<Link
href={`/blog/${featured.slug}`}
className="group grid grid-cols-1 sm:grid-cols-2 w-full max-w-[80rem] mx-auto rounded-md overflow-hidden bg-bg-muted transition-transform duration-300 hover:-translate-y-1"
@@ -151,7 +155,23 @@ export default async function BlogOverviewPage({
)}
{rest.length > 0 && (
<RevealGroup className="flex flex-col w-full max-w-[80rem] mx-auto px-[var(--layout-padding-x)] py-6 divide-y divide-border">
// key'd on the rendered post set — RevealGroup's `whileInView`
// only fires once per component instance (viewport.once=true),
// and a category-filter change re-renders this same page
// component in place (only `searchParams` differs, no full
// remount). Since `rest.length > 0` stays true across most
// filter transitions, RevealGroup itself never naturally
// unmounts, so once it has already fired "show" for one
// filter's list, freshly swapped-in RevealItems (new post ids)
// mount into an already-settled parent that has no reason to
// re-fire the reveal trigger — they were stuck at opacity 0
// forever, reported as the list appearing blank after refiltering.
// Forcing a remount on every distinct post set restarts
// RevealGroup's viewport tracking from scratch each time.
<RevealGroup
key={rest.map((post) => post.id).join(",")}
className="flex flex-col w-full max-w-[80rem] mx-auto px-[var(--layout-padding-x)] py-6 divide-y divide-border"
>
{rest.map((post) => (
<RevealItem key={post.id} className="py-8 first:pt-0 last:pb-0">
<Link href={`/blog/${post.slug}`} className="group flex flex-col sm:flex-row gap-6 items-start">