fix(explorer): show loader only on initial table data load (#3517)

Author: karooolis

.changeset/three-seals-hear.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+The loader in the Explore table now appears only during the initial data load. Additionally, a loading spinner has been added to the query submit button for non-live queries to indicate when a query is being refetched.

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx

@@ -37,15 +37,7 @@ type Props = {
 export function TablesViewer({ table, query, isLiveQuery }: Props) {
   const { id: chainId } = useChain();
   const indexer = indexerForChainId(chainId);
-  const {
-    data: tableData,
-    isLoading: isTDataLoading,
-    isRefetching,
-    isFetched,
-    isError,
-    error,
-  } = useTableDataQuery({ table, query, isLiveQuery });
-  const isLoading = isTDataLoading || isRefetching || !isFetched;
+  const { data: tableData, isPending, isError, error } = useTableDataQuery({ table, query, isLiveQuery });
   const [globalFilter, setGlobalFilter] = useQueryState("filter", parseAsString.withDefault(""));
   const [sorting, setSorting] = useQueryState("sort", parseAsJson<SortingState>().withDefault(initialSortingState));
 
@@ -129,20 +121,20 @@ export function TablesViewer({ table, query, isLiveQuery }: Props) {
           disabled={!tableData}
         />
 
-        <ExportButton tableData={tableData} isLoading={isLoading} />
+        <ExportButton tableData={tableData} isLoading={isPending} />
       </div>
 
       <div
         className={cn("rounded-md border", {
           "border-red-400": isError,
         })}
       >
-        {isLoading && (
+        {isPending && (
           <div className="flex h-24 items-center justify-center">
             <LoaderIcon className="h-5 w-5 animate-spin" />
           </div>
         )}
-        {!isLoading && (
+        {!isPending && (
           <div className="relative w-full overflow-auto">
             <Table>
               <TableHeader>