fix(chart): prevent infinite loops and remove hardcoded text
Some checks failed
CI / Lint, Test & Build (push) Failing after 9s
CI / Deploy production (on server) (push) Has been skipped

- Memoize ChartWrapper to prevent infinite re-renders in MarkdownContent
- Remove hardcoded French text (multilingual app)
- Return null for invalid charts instead of error messages
This commit is contained in:
Antigravity
2026-05-22 18:33:55 +00:00
parent bfaacc557f
commit ca0637cc6e
2 changed files with 11 additions and 5 deletions

View File

@@ -1,6 +1,6 @@
'use client' 'use client'
import { memo } from 'react' import { memo, useMemo } from 'react'
import ReactMarkdown from 'react-markdown' import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm' import remarkGfm from 'remark-gfm'
import remarkMath from 'remark-math' import remarkMath from 'remark-math'
@@ -9,6 +9,11 @@ import rehypeRaw from 'rehype-raw'
import 'katex/dist/katex.min.css' import 'katex/dist/katex.min.css'
import { NoteChartFromCode } from './note-chart' import { NoteChartFromCode } from './note-chart'
// Memoized wrapper to prevent infinite re-renders
const ChartWrapper = memo(function ChartWrapper({ code }: { code: string }) {
return <NoteChartFromCode code={code} />
})
interface MarkdownContentProps { interface MarkdownContentProps {
content: string content: string
className?: string className?: string
@@ -28,9 +33,10 @@ export const MarkdownContent = memo(function MarkdownContent({ content, classNam
const match = /language-(\w+)/.exec(className || '') const match = /language-(\w+)/.exec(className || '')
const language = match ? match[1] : '' const language = match ? match[1] : ''
// Chart code blocks // Chart code blocks - memoized to prevent infinite loops
if (language === 'chart') { if (language === 'chart') {
return <NoteChartFromCode code={String(children).replace(/\n$/, '')} /> const chartCode = String(children).replace(/\n$/, '')
return <ChartWrapper key={chartCode.slice(0, 50)} code={chartCode} />
} }
// Other code blocks // Other code blocks

View File

@@ -182,7 +182,7 @@ function NoteChart({ type, title, data, colors, showLegend, height = 250 }: Note
} }
default: default:
return <div className="text-center text-muted-foreground py-8">Type de graphique non supporté: {type}</div> return null
} }
} }
@@ -246,6 +246,6 @@ export function parseChartFromCode(code: string): NoteChartProps | null {
export function NoteChartFromCode({ code }: { code: string }) { export function NoteChartFromCode({ code }: { code: string }) {
const props = useMemo(() => parseChartFromCode(code), [code]) const props = useMemo(() => parseChartFromCode(code), [code])
if (!props) return <div className="text-center text-muted-foreground py-4">Format de graphique invalide</div> if (!props) return null
return <NoteChart {...props} /> return <NoteChart {...props} />
} }