fix(site): keep phase cards visible after renderPhases re-render

[pzy0006]

renderPhases() rebuilds the .toc-row nodes via innerHTML, but the IntersectionObserver in initFadeObserver() only watches the original rows from page load. When AIFSProgress.onChange fires (e.g. on a storage event after returning from lesson.html), the new rows are not observed and stay at opacity:0 under 'body.js-anim .toc-row', making the curriculum cards disappear.

After re-rendering, re-apply stagger delays and, if the reveal has already initialised (body.js-anim is set), mark the rebuilt rows .in-view .visible immediately so they don't get stuck hidden.

What this PR does

Kind of change

• New lesson
• Fix to an existing lesson
• Translation
• New output (prompt, skill, agent, MCP server)
• Docs / website / tooling

Checklist

• Code runs without errors with the listed dependencies
• No comments in code files (docs explain, code is self-explanatory)
• Built from scratch first, then shown with a framework (for new lessons)
• Lesson folder matches LESSON_TEMPLATE.md structure
• ROADMAP.md row for the lesson is a markdown link ([Name](phases/...)), not bare text
• One lesson per commit (atomic per-lesson rule)
• Tested locally / code output matches what docs/en.md claims

Phase / lesson

Notes for reviewer

Summary by CodeRabbit

• Bug Fixes
  • Fixed animation stagger timing to properly reapply when grid content is regenerated dynamically, ensuring smooth and consistent visual transitions throughout updates
  • Resolved visibility issues where newly created grid elements remained hidden when page animations were already in progress, preventing them from appearing as intended

[vercel]

@pzy0006 is attempting to deploy a commit to the rohitg00's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR adds post-render handling to renderPhases() in site/app.js. After the grid DOM is regenerated, the function now restores stagger animation delays by calling initStaggerIndex() and conditionally marks newly created rows as visible when animations are already active, preventing visual state inconsistency.

Changes

Phase Grid Rendering

Layer / File(s)	Summary
Post-render stagger and visibility restoration site/app.js	After regenerating the phase grid DOM via innerHTML, renderPhases() re-applies stagger animation delays using initStaggerIndex(). When the page is already in animation mode (js-anim class present), the function adds in-view and visible classes to newly created .toc-row elements to ensure they appear immediately instead of remaining hidden under CSS reveal rules.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A grid that hid when reborn, now staggered once more,
Delays restored, visibility set—animation no longer a chore!
The renderer remembers what was, brings the dance back to light,
Fresh rows leap in-view, animation takes flight ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and specifically describes the main fix: preventing phase cards from becoming hidden after the renderPhases() function re-renders the DOM.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}