feat(explorer): loading indicator for refetched query (#3552)

Author: karooolis

.changeset/orange-toes-cheer.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Display a loading indicator on the query execution button while refetching a non-live query.

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { CommandIcon, CornerDownLeft, PauseIcon, PlayIcon } from "lucide-react";
+import { CommandIcon, CornerDownLeft, LoaderIcon, PauseIcon, PlayIcon } from "lucide-react";
 import { KeyCode, KeyMod, editor } from "monaco-editor/esm/vs/editor/editor.api";
 import { useQueryState } from "nuqs";
 import { useEffect, useRef, useState } from "react";
@@ -26,13 +26,19 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [isFocused, setIsFocused] = useState(false);
+  const [isUserTriggeredRefetch, setIsUserTriggeredRefetch] = useState(false);
   const [query, setQuery] = useQueryState("query", { defaultValue: "" });
   const validateQuery = useQueryValidator(table);
-  const { data: tableData, refetch } = useTableDataQuery({
+  const {
+    data: tableData,
+    refetch,
+    isRefetching: isTableDataRefetching,
+  } = useTableDataQuery({
     table,
     query,
     isLiveQuery,
   });
+  const isRefetching = isTableDataRefetching && isUserTriggeredRefetch;
   useMonacoSuggestions(table);
 
   const form = useForm({
@@ -45,7 +51,9 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
   const handleSubmit = form.handleSubmit((data) => {
     if (validateQuery(data.query)) {
       setQuery(data.query);
-      refetch();
+
+      setIsUserTriggeredRefetch(true);
+      refetch().finally(() => setIsUserTriggeredRefetch(false));
     }
   });
 
@@ -93,6 +101,7 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
                       label: "Execute SQL command",
                       keybindings: [KeyMod.CtrlCmd | KeyCode.Enter],
                       run: () => {
+                        console.log("EXECUTING SQL COMMAND");
                         handleSubmit();
                       },
                     });
@@ -136,27 +145,38 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
               </span>
 
               <Tooltip text={isLiveQuery ? "Pause live query" : "Start live query"}>
-                <Button variant="outline" size="icon" onClick={() => setIsLiveQuery(!isLiveQuery)}>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setIsLiveQuery(!isLiveQuery);
+                  }}
+                >
                   {isLiveQuery ? <PauseIcon className="h-4 w-4" /> : <PlayIcon className="h-4 w-4" />}
                 </Button>
               </Tooltip>
             </>
           ) : null}
 
-          <Button className="flex gap-2 pl-4 pr-3" type="submit">
+          <Button className="group relative flex gap-2 pl-4 pr-3" type="submit" disabled={isRefetching}>
             Run
-            <span className="flex items-center gap-0.5 text-white/60">
-              {navigator.platform.toLowerCase().includes("mac") ? (
-                <>
-                  <CommandIcon className="h-3 w-3" />
-                  <CornerDownLeft className="h-3 w-3" />
-                </>
-              ) : (
-                <>
-                  <span className="text-xs">CTRL</span>
-                  <CornerDownLeft className="h-3 w-3" />
-                </>
-              )}
+            <span className="relative flex items-center gap-0.5 text-white/60">
+              <LoaderIcon className="absolute h-4 w-4 animate-spin opacity-0 group-disabled:opacity-100" />
+              <span className="flex items-center gap-0.5 opacity-100 group-disabled:opacity-0">
+                {navigator.platform.toLowerCase().includes("mac") ? (
+                  <>
+                    <CommandIcon className="h-3 w-3" />
+                    <CornerDownLeft className="h-3 w-3" />
+                  </>
+                ) : (
+                  <>
+                    <span className="text-xs">CTRL</span>
+                    <CornerDownLeft className="h-3 w-3" />
+                  </>
+                )}
+              </span>
             </span>
           </Button>
         </div>