feat: Implement request cancellation for package fetching using AbortController in PackageBrowserV2 and update API client to support it.

src/components/PackageBrowserV2.tsx

@@ -42,6 +42,8 @@ export function PackageBrowserV2({
 
   // Load packages when platform changes
   useEffect(() => {
+    const controller = new AbortController()
+
     const loadPackages = async () => {
       if (!selectedPlatform) {
         setPackages([])
@@ -73,7 +75,7 @@ export function PackageBrowserV2({
         }
 
         console.log('🔍 Frontend: API params:', params)
-        const result = await apiClient.getPackages(params)
+        const result = await apiClient.getPackages(params, controller.signal)
         console.log('📦 Frontend: Received initial packages:', {
           total: result.total,
           packageCount: result.packages.length,
@@ -83,14 +85,24 @@ export function PackageBrowserV2({
         setTotalCount(result.total)
         setHasMore(result.packages.length < result.total)
       } catch (error) {
+        if (error instanceof Error && error.name === 'AbortError') {
+          console.log('Request aborted')
+          return
+        }
         console.error('Failed to load packages:', error)
         setPackages([])
       } finally {
+        if (!controller.signal.aborted) {
           setLoading(false)
         }
       }
+    }
 
     loadPackages()
+
+    return () => {
+      controller.abort()
+    }
   }, [selectedPlatform, typeFilter, repositoryFilter, isDebianUbuntu, isArch])
 
   // Debounced search to prevent focus loss
@@ -303,8 +315,7 @@ export function PackageBrowserV2({
               packages.map((pkg) => (
                 <div
                   key={pkg.id}
-                  className={`flex items-start space-x-3 p-3 rounded-lg border transition-colors cursor-pointer ${
+                  className={`flex items-start space-x-3 p-3 rounded-lg border transition-colors cursor-pointer ${isPackageSelected(pkg)
-                    isPackageSelected(pkg) 
                       ? 'border-primary bg-primary/5'
                       : 'border-border hover:bg-secondary/50'
                     }`}

src/lib/api/client.ts

@@ -47,7 +47,8 @@ class ApiClient {
 
   // Package operations
   async getPackages(
-    filters: FilterOptions = {}
+    filters: FilterOptions = {},
+    signal?: AbortSignal
   ): Promise<{ packages: Package[]; total: number }> {
     const params = new URLSearchParams();
 
@@ -64,7 +65,8 @@ class ApiClient {
 
     const query = params.toString() ? `?${params.toString()}` : "";
     return this.request<{ packages: Package[]; total: number }>(
-      `/packages${query}`
+      `/packages${query}`,
+      { signal }
     );
   }
 

src/services/archPackageFetcher.ts

@@ -7,25 +7,7 @@ interface ArchPackage {
   lastUpdated: string
 }
 
-// Simple HTML parser without external dependencies
+
-function parseHTML(html: string) {
-  return {
-    querySelector: (selector: string) => {
-      const regex = new RegExp(`<${selector}[^>]*>([\\s\\S]*?)<\\/${selector}>`, 'gi')
-      const match = regex.exec(html)
-      return match ? { textContent: match[1].replace(/<[^>]*>/g, '').trim() } : null
-    },
-    querySelectorAll: (selector: string) => {
-      const results: any[] = []
-      const regex = new RegExp(`<${selector}[^>]*>([\\s\\S]*?)<\\/${selector}>`, 'gi')
-      let match
-      while ((match = regex.exec(html)) !== null) {
-        results.push({ innerHTML: match[1], textContent: match[1].replace(/<[^>]*>/g, '').trim() })
-      }
-      return results
-    }
-  }
-}
 
 export class ArchPackageFetcher {
   private baseUrl = 'https://archlinux.org/packages'