diff --git a/src/modules/market/components/MarketSearchBar.vue b/src/modules/market/components/MarketSearchBar.vue index 1f5a564..3e45814 100644 --- a/src/modules/market/components/MarketSearchBar.vue +++ b/src/modules/market/components/MarketSearchBar.vue @@ -93,8 +93,8 @@ import { useLocalStorage, useBreakpoints, breakpointsTailwind, useDebounceFn } f import type { Product } from '../types/market' // Conditional imports for enhanced mode -const SearchSuggestions = ref() -const useSearchKeyboardShortcuts = ref() +import SearchSuggestions from './SearchSuggestions.vue' +import { useSearchKeyboardShortcuts } from '../composables/useSearchKeyboardShortcuts' interface Props { /** @@ -159,20 +159,7 @@ const props = withDefaults(defineProps(), { const emit = defineEmits() -// Dynamically import enhanced features only when needed -const initializeEnhancements = async () => { - if (props.showEnhancements) { - const [suggestionModule, shortcutModule] = await Promise.all([ - import('./SearchSuggestions.vue'), - import('../composables/useSearchKeyboardShortcuts') - ]) - SearchSuggestions.value = suggestionModule.default - useSearchKeyboardShortcuts.value = shortcutModule.useSearchKeyboardShortcuts - } -} - -// Initialize enhancements -initializeEnhancements() +// Enhanced features imported statically for better performance // Create reactive data ref for the composable const dataRef = computed(() => props.data) @@ -192,9 +179,9 @@ const searchInputRef = ref() const isFocused = ref(false) // Enhanced features state (only initialized if showEnhancements is true) -const recentSearches = computed(() => - props.showEnhancements ? useLocalStorage('market-recent-searches', []) : ref([]) -) +const recentSearches = props.showEnhancements + ? useLocalStorage('market-recent-searches', []) + : ref([]) // Responsive breakpoints (only for enhanced mode) const breakpoints = computed(() => @@ -319,7 +306,7 @@ const handleKeydown = (event: KeyboardEvent) => { } // Use enhanced keyboard shortcuts if available - if (useSearchKeyboardShortcuts.value && handleSearchKeydown) { + if (handleSearchKeydown) { const shouldClear = handleSearchKeydown(event) if (shouldClear) { if (internalQuery.value || searchQuery.value) { @@ -381,8 +368,8 @@ let handleSearchKeydown = (_event: KeyboardEvent) => false // Initialize keyboard shortcuts for enhanced mode watch(() => props.showEnhancements, async (showEnhancements) => { - if (showEnhancements && useSearchKeyboardShortcuts.value) { - const shortcuts = useSearchKeyboardShortcuts.value(searchInputRef) + if (showEnhancements && useSearchKeyboardShortcuts) { + const shortcuts = useSearchKeyboardShortcuts(searchInputRef) focusSearchInput = shortcuts.focusSearchInput blurSearchInput = shortcuts.blurSearchInput handleSearchKeydown = shortcuts.handleSearchKeydown