Trends & Forge tabs: complete redesign - cleaner UI, mobile-first, progressive disclosure

frontend/src/components/hunt/SearchTab.tsx

@@ -47,7 +47,8 @@ interface TldCheckResult {
 }
 
 // Popular TLDs to check when user enters only a name without extension
-const POPULAR_TLDS = ['com', 'net', 'org', 'io', 'ch', 'de', 'app', 'dev', 'co', 'ai']
+// Ordered by popularity/importance - most common first for faster perceived loading
+const POPULAR_TLDS = ['com', 'ch', 'io', 'net', 'org', 'de', 'ai', 'co', 'app', 'dev']
 
 // Known valid TLDs (subset for quick validation)
 const KNOWN_TLDS = new Set([
@@ -131,7 +132,7 @@ export function SearchTab({ showToast }: SearchTabProps) {
     }
   }, [])
 
-  // Check multiple TLDs for a name
+  // Check multiple TLDs for a name - with progressive loading and quick mode
   const checkMultipleTlds = useCallback(async (name: string) => {
     // Initialize results with loading state
     const initialResults: TldCheckResult[] = POPULAR_TLDS.map(tld => ({
@@ -142,31 +143,36 @@ export function SearchTab({ showToast }: SearchTabProps) {
     }))
     setTldResults(initialResults)
 
-    // Check each TLD in parallel
+    // Check each TLD in parallel with progressive updates (using quick=true for speed)
-    const results = await Promise.all(
+    POPULAR_TLDS.forEach(async (tld, index) => {
-      POPULAR_TLDS.map(async (tld): Promise<TldCheckResult> => {
+      const domain = `${name}.${tld}`
-        const domain = `${name}.${tld}`
+      try {
-        try {
+        // Use quick=true for DNS-only check (much faster!)
-          const result = await api.checkDomain(domain)
+        const result = await api.checkDomain(domain, true)
-          return {
+        setTldResults(prev => {
+          const updated = [...prev]
+          updated[index] = {
             tld,
             domain,
             is_available: result.is_available,
             loading: false,
           }
-        } catch {
+          return updated
-          return {
+        })
+      } catch {
+        setTldResults(prev => {
+          const updated = [...prev]
+          updated[index] = {
             tld,
             domain,
             is_available: null,
             loading: false,
             error: 'Check failed',
           }
-        }
+          return updated
-      })
+        })
-    )
+      }
-    
+    })
-    setTldResults(results)
   }, [])
 
   // Search Handler
@@ -303,10 +309,10 @@ export function SearchTab({ showToast }: SearchTabProps) {
 
       {/* Stats Bar */}
       <div className="flex items-center justify-between text-[10px] font-mono text-white/40">
-        <span>Enter a domain to check availability via RDAP/WHOIS</span>
+        <span>Enter a name (checks 10 TLDs) or full domain (e.g. example.com)</span>
         <span className="flex items-center gap-1">
           <Sparkles className="w-3 h-3" />
-          Instant check
+          RDAP/WHOIS
         </span>
       </div>