diff --git a/src/components/TalibPatternPanel.tsx b/src/components/TalibPatternPanel.tsx index 0098053..c01dd55 100644 --- a/src/components/TalibPatternPanel.tsx +++ b/src/components/TalibPatternPanel.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useEffect, useCallback } from 'react'; +import { useState, useEffect, useCallback, useRef } from 'react'; import { ChevronDown, Trash2 } from 'lucide-react'; interface PatternInfo { @@ -33,21 +33,23 @@ export default function TalibPatternPanel({ const [results, setResults] = useState([]); const [deletingLabel, setDeletingLabel] = useState(null); const [isDeletingAll, setIsDeletingAll] = useState(false); + const hasLoaded = useRef(false); // Fetch available patterns when panel expands useEffect(() => { - if (expanded && patterns.length === 0) { + if (expanded && !hasLoaded.current) { setIsFetchingPatterns(true); fetch('/api/patterns/available') .then((r) => r.json()) .then((data) => { const list: PatternInfo[] = data.patterns || data; setPatterns(list); + hasLoaded.current = true; }) .catch(() => setError('Failed to load patterns')) .finally(() => setIsFetchingPatterns(false)); } - }, [expanded, patterns.length]); + }, [expanded]); const handleSelectAll = () => { setSelectedPatterns(new Set(patterns.map((p) => p.function_name)));