feat: integrate UI components into Search pages with pagination and loading

- Add useDebounce hook for future search optimization
- Integrate LoadingState, ErrorState, RefreshControl, and PaginationLoader into searchResults.tsx
- Add pull-to-refresh functionality with RefreshControl component
- Implement pagination with loadMore and PaginationLoader
- Add error handling with retry functionality using ErrorState
- Update SearchResultsGrid to support refreshControl, onEndReached, and ListFooterComponent props
- Add scroll event handling for pagination trigger
- Add TODO comment in searchWorksResults.tsx for backend API integration
- Reduce initial search limit from 50 to 20 for better performance

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/searchResults.tsx

@@ -3,7 +3,7 @@ import {
     View,
     StyleSheet,
     StatusBar as RNStatusBar,
-    RefreshControl,
+    ScrollView,
 } from 'react-native'
 import { StatusBar } from 'expo-status-bar'
 import { SafeAreaView } from 'react-native-safe-area-context'
@@ -11,6 +11,10 @@ import { useRouter, useLocalSearchParams } from 'expo-router'
 
 import SearchResultsGrid from '@/components/SearchResultsGrid'
 import SearchBar from '@/components/SearchBar'
+import RefreshControl from '@/components/RefreshControl'
+import LoadingState from '@/components/LoadingState'
+import ErrorState from '@/components/ErrorState'
+import PaginationLoader from '@/components/PaginationLoader'
 import { useTemplates, useSearchHistory } from '@/hooks'
 
 export default function SearchResultsScreen() {
@@ -19,27 +23,20 @@ export default function SearchResultsScreen() {
     const [searchText, setSearchText] = useState((params.q as string) || '')
     const [refreshing, setRefreshing] = useState(false)
 
-    // 使用 useTemplates hook 进行搜索
-    const { templates, loading, error, execute, refetch } = useTemplates()
-
-    // 使用搜索历史 hook
+    const { templates, loading, loadingMore, error, execute, refetch, loadMore, hasMore } = useTemplates()
     const { addToHistory } = useSearchHistory()
 
-    // 当搜索关键词变化时，执行搜索
     useEffect(() => {
         if (params.q && typeof params.q === 'string') {
             const query = params.q.trim()
             setSearchText(query)
             if (query) {
-                // 执行搜索
-                execute({ search: query, limit: 50, sortBy: 'createdAt', sortOrder: 'desc', page: 1 })
-                // 添加到搜索历史
+                execute({ search: query, limit: 20, sortBy: 'createdAt', sortOrder: 'desc', page: 1 })
                 addToHistory(query)
             }
         }
     }, [params.q, execute, addToHistory])
 
-    // 处理下拉刷新
     const handleRefresh = async () => {
         setRefreshing(true)
         if (searchText) {
@@ -48,7 +45,12 @@ export default function SearchResultsScreen() {
         setRefreshing(false)
     }
 
-    // 将模板数据转换为搜索结果格式
+    const handleLoadMore = () => {
+        if (hasMore && !loadingMore) {
+            loadMore()
+        }
+    }
+
     const searchResults = templates.map(template => ({
         id: template.id,
         title: template.title || template.titleEn || '',
@@ -58,6 +60,76 @@ export default function SearchResultsScreen() {
         aspectRatio: template.aspectRatio ? parseFloat(template.aspectRatio as string) : undefined,
     }))
 
+    if (loading && !refreshing) {
+        return (
+            <SafeAreaView style={styles.container} edges={['top']}>
+                <StatusBar style="light" />
+                <RNStatusBar barStyle="light-content" />
+                <SearchBar
+                    searchText={searchText}
+                    onSearchTextChange={setSearchText}
+                    onSearch={(text) => {
+                        router.push({
+                            pathname: '/searchTemplate',
+                            params: { q: text, focus: 'true' },
+                        })
+                    }}
+                    onBack={() => router.back()}
+                    readOnly={true}
+                    onInputPress={() => {
+                        router.push({
+                            pathname: '/searchTemplate',
+                            params: { q: searchText, focus: 'true' },
+                        })
+                    }}
+                    onClearPress={() => {
+                        router.push({
+                            pathname: '/searchTemplate',
+                            params: { q: '', focus: 'true' },
+                        })
+                    }}
+                    marginBottom={12}
+                />
+                <LoadingState />
+            </SafeAreaView>
+        )
+    }
+
+    if (error) {
+        return (
+            <SafeAreaView style={styles.container} edges={['top']}>
+                <StatusBar style="light" />
+                <RNStatusBar barStyle="light-content" />
+                <SearchBar
+                    searchText={searchText}
+                    onSearchTextChange={setSearchText}
+                    onSearch={(text) => {
+                        router.push({
+                            pathname: '/searchTemplate',
+                            params: { q: text, focus: 'true' },
+                        })
+                    }}
+                    onBack={() => router.back()}
+                    readOnly={true}
+                    onInputPress={() => {
+                        router.push({
+                            pathname: '/searchTemplate',
+                            params: { q: searchText, focus: 'true' },
+                        })
+                    }}
+                    onClearPress={() => {
+                        router.push({
+                            pathname: '/searchTemplate',
+                            params: { q: '', focus: 'true' },
+                        })
+                    }}
+                    marginBottom={12}
+                />
+                <ErrorState message={error.message} onRetry={refetch} />
+            </SafeAreaView>
+        )
+    }
+
     return (
         <SafeAreaView style={styles.container} edges={['top']}>
             <StatusBar style="light" />
@@ -91,7 +163,10 @@ export default function SearchResultsScreen() {
 
             <SearchResultsGrid
                 results={searchResults}
-                loading={loading}
+                loading={false}
+                refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />}
+                onEndReached={handleLoadMore}
+                ListFooterComponent={loadingMore ? <PaginationLoader /> : null}
             />
         </SafeAreaView>
     )