Fix infinite loop in file picker with proper initialization flag
- Use isInitialized flag to prevent effect re-triggering - Use gitFilesFetched flag to prevent duplicate git API calls - Fetch git files and initial files only once on first open - Only refetch when search query actually changes - Git files are optional - don't block on empty results - Logs show initialization state for debugging
This commit is contained in:
@@ -24,6 +24,7 @@ const FilePicker: Component<FilePickerProps> = (props) => {
|
|||||||
const [cachedGitFiles, setCachedGitFiles] = createSignal<FileItem[]>([])
|
const [cachedGitFiles, setCachedGitFiles] = createSignal<FileItem[]>([])
|
||||||
|
|
||||||
let containerRef: HTMLDivElement | undefined
|
let containerRef: HTMLDivElement | undefined
|
||||||
|
let gitFilesFetched = false
|
||||||
|
|
||||||
async function fetchGitFiles() {
|
async function fetchGitFiles() {
|
||||||
if (!props.instanceClient) {
|
if (!props.instanceClient) {
|
||||||
@@ -31,11 +32,12 @@ const FilePicker: Component<FilePickerProps> = (props) => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (cachedGitFiles().length > 0) {
|
if (gitFilesFetched) {
|
||||||
console.log("[FilePicker] Git files already cached:", cachedGitFiles().length)
|
console.log("[FilePicker] Git files already fetched")
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
gitFilesFetched = true
|
||||||
console.log("[FilePicker] Fetching git files...")
|
console.log("[FilePicker] Fetching git files...")
|
||||||
const startTime = Date.now()
|
const startTime = Date.now()
|
||||||
|
|
||||||
@@ -44,7 +46,7 @@ const FilePicker: Component<FilePickerProps> = (props) => {
|
|||||||
const elapsed = Date.now() - startTime
|
const elapsed = Date.now() - startTime
|
||||||
console.log(`[FilePicker] Git files response received in ${elapsed}ms:`, gitResponse)
|
console.log(`[FilePicker] Git files response received in ${elapsed}ms:`, gitResponse)
|
||||||
|
|
||||||
if (gitResponse?.data) {
|
if (gitResponse?.data && gitResponse.data.length > 0) {
|
||||||
const gitFiles: FileItem[] = gitResponse.data.map((file: any) => ({
|
const gitFiles: FileItem[] = gitResponse.data.map((file: any) => ({
|
||||||
path: file.path,
|
path: file.path,
|
||||||
added: file.added,
|
added: file.added,
|
||||||
@@ -54,13 +56,11 @@ const FilePicker: Component<FilePickerProps> = (props) => {
|
|||||||
console.log(`[FilePicker] Cached ${gitFiles.length} git files`)
|
console.log(`[FilePicker] Cached ${gitFiles.length} git files`)
|
||||||
setCachedGitFiles(gitFiles)
|
setCachedGitFiles(gitFiles)
|
||||||
} else {
|
} else {
|
||||||
console.log("[FilePicker] Git response has no data:", gitResponse)
|
console.log("[FilePicker] Git response has no data or empty array")
|
||||||
setCachedGitFiles([])
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
const elapsed = Date.now() - startTime
|
const elapsed = Date.now() - startTime
|
||||||
console.warn(`[FilePicker] Git files not available after ${elapsed}ms:`, error)
|
console.warn(`[FilePicker] Git files not available after ${elapsed}ms:`, error)
|
||||||
setCachedGitFiles([])
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -117,22 +117,26 @@ const FilePicker: Component<FilePickerProps> = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let lastQuery = ""
|
let lastQuery = ""
|
||||||
|
let isInitialized = false
|
||||||
|
|
||||||
createEffect(() => {
|
createEffect(() => {
|
||||||
console.log(`[FilePicker] Effect triggered - open: ${props.open}, query: "${props.searchQuery}"`)
|
console.log(
|
||||||
|
`[FilePicker] Effect triggered - open: ${props.open}, query: "${props.searchQuery}", gitFilesFetched: ${gitFilesFetched}, isInitialized: ${isInitialized}`,
|
||||||
|
)
|
||||||
|
|
||||||
if (props.open) {
|
if (props.open && !isInitialized) {
|
||||||
if (cachedGitFiles().length === 0) {
|
isInitialized = true
|
||||||
console.log("[FilePicker] Triggering git files fetch")
|
console.log("[FilePicker] First open - fetching git files and initial files")
|
||||||
fetchGitFiles()
|
fetchGitFiles()
|
||||||
}
|
fetchFiles(props.searchQuery)
|
||||||
if (props.searchQuery !== lastQuery) {
|
lastQuery = props.searchQuery
|
||||||
console.log(`[FilePicker] Query changed from "${lastQuery}" to "${props.searchQuery}"`)
|
return
|
||||||
lastQuery = props.searchQuery
|
}
|
||||||
fetchFiles(props.searchQuery)
|
|
||||||
} else {
|
if (props.open && props.searchQuery !== lastQuery) {
|
||||||
console.log(`[FilePicker] Query unchanged: "${props.searchQuery}"`)
|
console.log(`[FilePicker] Query changed from "${lastQuery}" to "${props.searchQuery}"`)
|
||||||
}
|
lastQuery = props.searchQuery
|
||||||
|
fetchFiles(props.searchQuery)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user