Skip to content

fix: mermaid preview rendering + useShallow infinite loop - #91

Merged
aterrylu merged 1 commit into
mainfrom
terry/fix-mermaid
Mar 28, 2026
Merged

fix: mermaid preview rendering + useShallow infinite loop#91
aterrylu merged 1 commit into
mainfrom
terry/fix-mermaid

Conversation

@aterrylu

Copy link
Copy Markdown
Owner

Summary

  • Mermaid rendering fixed — diagrams in markdown preview now render correctly with error handling
  • React chore(release): version packages #185 hotfix — fixes infinite re-render loop from perf PR's useSidebarActions() missing useShallow

Problem

  1. Mermaid code blocks in markdown previews silently rendered nothing — mermaid.render() had no .catch(), useId() caused StrictMode ID collisions, and react-markdown v10 passes children as React nodes not strings
  2. Perf PR (perf: Tier 1 dashboard rendering optimizations #88) introduced a useSidebarActions() selector that returned a new {} on every store update without useShallow, causing infinite re-renders (React error chore(release): version packages #185 on page load)

Changes

Fix File Issue
Add .catch() to mermaid.render PreviewPane.tsx, PreviewPage.tsx Silent failures → visible error
Monotonic counter for diagram IDs Both preview files StrictMode double-render collisions
Coerce children to string Both preview files react-markdown v10 compatibility
Add useShallow to useSidebarActions Sidebar.tsx Infinite re-render loop

Test plan

  • Dashboard loads without React error chore(release): version packages #185
  • Deployed and verified on forge
  • Open markdown file with mermaid code block — should render diagram
  • Invalid mermaid syntax shows error message (not blank)

🤖 Generated with Claude Code

Mermaid diagrams in markdown preview were silently failing:
- mermaid.render() had no .catch() — errors swallowed silently
- useId() caused ID collisions in StrictMode double-renders
- react-markdown v10 passes children as React nodes, not strings

Also fixes infinite re-render loop (React error #185) from perf PR:
- useSidebarActions() selector returned new {} on every store update
  without useShallow, causing maximum update depth exceeded

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@aterrylu
aterrylu merged commit 9bed0cf into main Mar 28, 2026
@aterrylu
aterrylu deleted the terry/fix-mermaid branch March 28, 2026 08:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant