Enhance search functionality with immediate feedback and loading indicators

- Updated SearchForm to provide instant feedback for valid B256 addresses and improved state management for search results.
- Modified SearchResultDropdown to clarify loading state with updated text and aria-label for better accessibility.
- Adjusted SearchResolverSlow to streamline transaction fetching and ensure consistent data mapping for GraphQL responses.

Author: nelitow

packages/app-explorer/src/systems/Core/components/Search/SearchForm.tsx

@@ -1,3 +1,4 @@
+import { isB256 } from 'fuels';
 import { ApiService } from '~/services/api';
 
 import type { GQLSearchResult } from '@fuel-explorer/graphql';
@@ -23,27 +24,61 @@ export function SearchForm({ className, autoFocus }: SearchFormProps) {
     try {
       const query = formData.get('query')?.toString() || '';
 
-      // Call fast search first, update UI immediately
+      // Call fast search first
       const fastResponse = await ApiService.searchFast(query).catch(() => null);
 
-      // Update UI with fast results immediately
-      setResults(fastResponse || undefined);
+      // Determine what to show immediately - evaluate all logic before setting state
+      let initialResult: GQLSearchResult | undefined;
 
-      // Stop initial loading spinner - fast results are showing
-      setLoading(false);
+      if (fastResponse) {
+        // If we got fast results, show them immediately
+        initialResult = fastResponse;
+      } else if (isB256(query)) {
+        // If no fast result but valid B256, show empty account immediately
+        // This gives instant feedback that it's a valid account address
+        initialResult = {
+          account: {
+            address: query,
+            transactions: [],
+            __typename: 'SearchAccount',
+          },
+        } as GQLSearchResult;
+      } else {
+        // No fast results and not a valid B256 hash
+        initialResult = undefined;
+      }
 
-      // Show "loading more results" indicator
+      // Update UI with immediate results - single setResults call to avoid race conditions
+      setResults(initialResult);
+      setLoading(false);
       setLoadingMore(true);
 
       // Now fetch slow results in background and merge
       const slowResponse = await ApiService.searchSlow(query).catch(() => null);
 
       if (slowResponse) {
         // Merge fast and slow results
-        const merged = {
-          ...fastResponse,
-          ...slowResponse,
-        };
+        let merged: GQLSearchResult | null = null;
+
+        if (fastResponse) {
+          // If we had fast results, merge with slow
+          merged = {
+            ...fastResponse,
+            ...slowResponse,
+          };
+        } else if (slowResponse.account) {
+          // If slow found account transactions, update the account with transactions
+          merged = {
+            account: {
+              ...slowResponse.account,
+              __typename: 'SearchAccount',
+            },
+          } as GQLSearchResult;
+        } else {
+          // Keep the empty account we showed earlier, or merge slow results
+          merged = slowResponse;
+        }
+
         setResults(merged || undefined);
       }
 

packages/app-explorer/src/systems/Core/components/Search/SearchResultDropdown/SearchResultDropdown.tsx

@@ -252,9 +252,13 @@ export const SearchResultDropdown = forwardRef<
               )}
               {loadingMore && (
                 <div className={classes.loadingContainer()}>
-                  <Spinner size={16} color="brand" aria-label="loading more" />
+                  <Spinner
+                    size={16}
+                    color="brand"
+                    aria-label="loading recent transactions"
+                  />
                   <p className={classes.loadingText()}>
-                    Loading more results...
+                    Loading recent transactions...
                   </p>
                 </div>
               )}

packages/graphql/src/graphql/resolvers/SearchResolver.ts

@@ -138,7 +138,7 @@ export class SearchResolver {
         account: {
           address,
           transactions: transactionsResult.value.map(
-            (transaction: TransactionEntity) => transaction.toGQLNode(),
+            (transaction: TransactionEntity) => transaction.toGQLListNode(),
           ),
         },
       };

packages/graphql/src/graphql/resolvers/SearchResolverSlow.ts

@@ -3,7 +3,6 @@ import { Hash256 } from '~/application/vo';
 import { logger } from '~/core/Logger';
 import type { TransactionEntity } from '~/domain/Transaction/TransactionEntity';
 import DataCache from '~/infra/cache/DataCache';
-import AssetDAO from '~/infra/dao/AssetDAO';
 import TransactionDAO from '~/infra/dao/TransactionDAO';
 
 type Params = {
@@ -38,32 +37,17 @@ export class SearchResolverSlow {
     // Skip block height check (already handled by fast resolver)
     const address = Hash256.create(params.query).value();
     const transactionDAO = new TransactionDAO();
-    const assetDAO = new AssetDAO();
 
-    // Slow queries: account transactions and assets
+    // Slow queries: account transactions only
+    // Assets are rarely searched and not critical for the initial result
     // Use recent transactions view for better performance on high-volume accounts
-    const results = await Promise.allSettled([
-      assetDAO.getByAssetId(address),
-      transactionDAO.getRecentTransactionsByOwner(address),
-    ]);
-
-    const [assetResult, transactionsResult] = results;
-
-    // Priority order: Asset > Account
-
-    if (assetResult.status === 'fulfilled' && assetResult.value) {
-      logger.debug('GraphQL', 'SearchResolverSlow.searchSlow - found asset');
-      const result = {
-        asset: assetResult.value,
-      };
-      DataCache.getInstance().save(cacheKey, 600000, result); // 10 min TTL
-      return result;
-    }
+    const transactionsResult =
+      await transactionDAO.getRecentTransactionsByOwner(address);
 
     if (
-      transactionsResult.status === 'fulfilled' &&
-      transactionsResult.value &&
-      transactionsResult.value.length > 0
+      transactionsResult &&
+      Array.isArray(transactionsResult) &&
+      transactionsResult.length > 0
     ) {
       logger.debug(
         'GraphQL',
@@ -72,8 +56,8 @@ export class SearchResolverSlow {
       const result = {
         account: {
           address,
-          transactions: transactionsResult.value.map(
-            (transaction: TransactionEntity) => transaction.toGQLNode(),
+          transactions: transactionsResult.map(
+            (transaction: TransactionEntity) => transaction.toGQLListNode(),
           ),
         },
       };