Add loading state to message search

src/components/search/SearchStates.tsx

@@ -5,6 +5,27 @@ import ErrorIcon from '../../images/icons/error-circle.svg';
 import SearchOffIcon from '../../images/icons/search-off.svg';
 import ShrugIcon from '../../images/icons/shrug.svg';
 import { Fade } from '../animation/Fade';
+import { Spinner } from '../animation/Spinner';
+
+export function SearchFetching({ show, isPiFetching }: { show: boolean; isPiFetching?: boolean }) {
+  return (
+    // Absolute position for overlaying cross-fade
+    <div className="absolute left-0 right-0 top-10">
+      <Fade show={show}>
+        <div className="flex justify-center my-10">
+          <div className="flex flex-col items-center justify-center max-w-md px-3 py-5">
+            <div className="flex items-center justify-center scale-90">
+              <Spinner />
+            </div>
+            <div className="mt-4 text-center leading-loose text-gray-700">
+              {isPiFetching ? 'Searching custom chains for messages' : 'Searching for messages'}
+            </div>
+          </div>
+        </div>
+      </Fade>
+    </div>
+  );
+}
 
 export function SearchError({
   show,

src/features/debugger/TxDebugger.tsx

@@ -10,7 +10,7 @@ import {
   SearchEmptyError,
   SearchInvalidError,
   SearchUnknownError,
-} from '../../components/search/SearchError';
+} from '../../components/search/SearchStates';
 import ShrugIcon from '../../images/icons/shrug.svg';
 import { useStore } from '../../store';
 import useDebounce from '../../utils/debounce';

src/features/messages/MessageSearch.tsx

@@ -2,12 +2,13 @@ import { useState } from 'react';
 
 import { Fade } from '../../components/animation/Fade';
 import { SearchBar } from '../../components/search/SearchBar';
+import { SearchFilterBar } from '../../components/search/SearchFilterBar';
 import {
   SearchEmptyError,
+  SearchFetching,
   SearchInvalidError,
   SearchUnknownError,
-} from '../../components/search/SearchError';
+} from '../../components/search/SearchStates';
-import { SearchFilterBar } from '../../components/search/SearchFilterBar';
 import useDebounce from '../../utils/debounce';
 import { useQueryParam, useSyncQueryParam } from '../../utils/queryParams';
 import { sanitizeString } from '../../utils/string';
@@ -54,6 +55,9 @@ export function MessageSearch() {
     isMessagesFound || isFetching,
   );
 
+  // Coalesce GraphQL + PI results
+  const isAnyFetching = isFetching || isPiFetching;
+  const isAnyError = isError || isPiError;
   const isAnyMessageFound = isMessagesFound || piMessageList.length > 0;
   const messageListResult = isMessagesFound ? messageList : piMessageList;
   console.log(isPiError, isPiFetching, piMessageList);
@@ -66,7 +70,7 @@ export function MessageSearch() {
       <SearchBar
         value={searchInput}
         onChangeValue={setSearchInput}
-        isFetching={isFetching}
+        isFetching={isAnyFetching}
         placeholder="Search by address, hash, or message id"
       />
       <div className="w-full min-h-[38rem] mt-5 bg-white shadow-md border rounded overflow-auto relative">
@@ -85,15 +89,19 @@ export function MessageSearch() {
             onChangeEndTimestamp={setEndTimeFilter}
           />
         </div>
-        <Fade show={!isError && isValidInput && isAnyMessageFound}>
+        <Fade show={!isAnyError && isValidInput && isAnyMessageFound}>
-          <MessageTable messageList={messageListResult} isFetching={isFetching} />
+          <MessageTable messageList={messageListResult} isFetching={isAnyFetching} />
         </Fade>
+        <SearchFetching
+          show={!isAnyError && isValidInput && !isAnyMessageFound && isAnyFetching}
+          isPiFetching={isPiFetching}
+        />
         <SearchEmptyError
-          show={!isError && isValidInput && !isFetching && !isAnyMessageFound}
+          show={!isAnyError && isValidInput && !isAnyMessageFound && !isAnyFetching}
           hasInput={hasInput}
           allowAddress={true}
         />
-        <SearchUnknownError show={isError && isValidInput} />
+        <SearchUnknownError show={isAnyError && isValidInput} />
         <SearchInvalidError show={!isValidInput} allowAddress={true} />
       </div>
     </>