Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-05 21:54:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve template search input performance issue (#8343)

Browse Source 
## Summary

Improve Template search input performance issue #8134
This was caused by the search logic running too frequently (throttled at
50ms), causing the main thread to block on every few keystrokes.


## Changes
Use debouncing that wait until you stop typing for a specific time
(300ms) before running.
It makes the searching function more smoothly.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8343-Improve-template-search-input-performance-issue-2f56d73d36508144bdf9fa5e0cd76818)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
Kelly Yang
2026-01-29 19:05:37 -08:00
committed by GitHub
parent 47113b117e
commit d784d4982b
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
View File

@@ -772,7 +772,7 @@ useIntersectionObserver(loadTrigger, () => {
// Reset pagination when filters change // Reset pagination when filters change
watch( watch(
[ [
searchQuery, filteredTemplates,
selectedNavItem, selectedNavItem,
sortBy, sortBy,
selectedModels, selectedModels,

4
src/composables/useTemplateFiltering.ts
View File

@@ -1,4 +1,4 @@
import { refThrottled, watchDebounced } from '@vueuse/core' import { refDebounced, watchDebounced } from '@vueuse/core'
import Fuse from 'fuse.js' import Fuse from 'fuse.js'
import type { IFuseOptions } from 'fuse.js' import type { IFuseOptions } from 'fuse.js'
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
@@ -119,7 +119,7 @@ export function useTemplateFiltering(
) )
}) })
const debouncedSearchQuery = refThrottled(searchQuery, 50) const debouncedSearchQuery = refDebounced(searchQuery, 150)
const filteredBySearch = computed(() => { const filteredBySearch = computed(() => {
if (!debouncedSearchQuery.value.trim()) { if (!debouncedSearchQuery.value.trim()) {