refactor: memoize ChunkCard component for performance optimization

This commit is contained in:
JoeMakuta 2026-03-31 15:49:56 +02:00
parent 25b068f420
commit 5fb4f49bc0

View file

@ -5,7 +5,7 @@ import { BookOpen, ChevronDown, ExternalLink, FileText, Hash, Sparkles, X } from
import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import type React from "react"; import type React from "react";
import { forwardRef, type ReactNode, useCallback, useEffect, useRef, useState } from "react"; import { forwardRef, memo, type ReactNode, useCallback, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { MarkdownViewer } from "@/components/markdown-viewer"; import { MarkdownViewer } from "@/components/markdown-viewer";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
@ -55,7 +55,7 @@ interface ChunkCardProps {
disableLayoutAnimation?: boolean; disableLayoutAnimation?: boolean;
} }
const ChunkCard = forwardRef<HTMLDivElement, ChunkCardProps>( const ChunkCard = memo(forwardRef<HTMLDivElement, ChunkCardProps>(
({ chunk, index, totalChunks, isCited }, ref) => { ({ chunk, index, totalChunks, isCited }, ref) => {
return ( return (
<div <div
@ -101,7 +101,7 @@ const ChunkCard = forwardRef<HTMLDivElement, ChunkCardProps>(
</div> </div>
); );
} }
); ));
ChunkCard.displayName = "ChunkCard"; ChunkCard.displayName = "ChunkCard";
export function SourceDetailPanel({ export function SourceDetailPanel({