diff --git a/.changeset/swift-poets-tan.md b/.changeset/swift-poets-tan.md
new file mode 100644
index 0000000000..82d0122065
--- /dev/null
+++ b/.changeset/swift-poets-tan.md
@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+SQL query execution time in Explore table is now measured and displayed.
diff --git a/packages/explorer/package.json b/packages/explorer/package.json
index 0577642d9d..a3dc540f02 100644
--- a/packages/explorer/package.json
+++ b/packages/explorer/package.json
@@ -54,6 +54,7 @@
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slot": "^1.1.0",
+ "@radix-ui/react-tooltip": "^1.1.6",
"@radix-ui/themes": "^3.0.5",
"@rainbow-me/rainbowkit": "^2.1.5",
"@tanstack/react-query": "^5.51.3",
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/Explorer.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/Explorer.tsx
index 3e6cc5275d..fcded2dd56 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/Explorer.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/Explorer.tsx
@@ -17,7 +17,7 @@ export function Explorer() {
const { worldAddress } = useParams();
const { id: chainId } = useChain();
const indexer = indexerForChainId(chainId);
- const [isLiveQuery, setIsLiveQuery] = useState(true);
+ const [isLiveQuery, setIsLiveQuery] = useState(false);
const [query, setQuery] = useQueryState("query", parseAsString.withDefault(""));
const [selectedTableId] = useQueryState("tableId");
const prevSelectedTableId = usePrevious(selectedTableId);
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx
index 5409dec4d4..249327a804 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx
@@ -7,9 +7,11 @@ import { useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { Table } from "@latticexyz/config";
import Editor from "@monaco-editor/react";
+import { Tooltip } from "../../../../../../components/Tooltip";
import { Button } from "../../../../../../components/ui/Button";
import { Form, FormField } from "../../../../../../components/ui/Form";
import { cn } from "../../../../../../utils";
+import { useTableDataQuery } from "../../../../queries/useTableDataQuery";
import { monacoOptions } from "./consts";
import { useMonacoSuggestions } from "./useMonacoSuggestions";
import { useQueryValidator } from "./useQueryValidator";
@@ -26,6 +28,11 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
const [isFocused, setIsFocused] = useState(false);
const [query, setQuery] = useQueryState("query", { defaultValue: "" });
const validateQuery = useQueryValidator(table);
+ const { data: tableData } = useTableDataQuery({
+ table,
+ query,
+ isLiveQuery,
+ });
useMonacoSuggestions(table);
const form = useForm({
@@ -107,15 +114,33 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
) : null}
-
-
+
+ {tableData ? (
+ <>
+
+
+
+
+ {tableData ? Math.round(tableData.queryDuration) : 0}ms
+
+
+ ยท
+
+ {tableData?.rows.length ?? 0} row{tableData?.rows.length !== 1 ? "s" : ""}
+
+
+
+
+
+
+ >
+ ) : null}