Fix(webapp): consistent query button width (#3067)

Prevents layout shift by keeping the button width the same when
isLoading

Normal state
<img width="423" height="186" alt="CleanShot 2026-02-16 at 10 31 23"
src="https://github.com/user-attachments/assets/232bc14f-dc2c-4092-9b46-f6d652568633"
/>

isLoading
<img width="403" height="137" alt="CleanShot 2026-02-16 at 10 31 43"
src="https://github.com/user-attachments/assets/e9215b48-c2cc-4ede-91ff-08bbdb2382a0"
/>

Author: samejr

apps/webapp/app/components/query/QueryEditor.tsx

@@ -354,9 +354,22 @@ const QueryEditorForm = forwardRef<
             variant="primary/small"
             disabled={isLoading || !query.trim()}
             shortcut={{ modifiers: ["mod"], key: "enter", enabledOnInputElements: true }}
-            LeadingIcon={isLoading ? <Spinner className="size-4" color="white" /> : undefined}
+            className={
+              isLoading
+                ? "relative !text-transparent [&_*]:!border-transparent [&_*]:!text-transparent"
+                : undefined
+            }
           >
-            {isLoading ? "Querying..." : "Query"}
+            {isLoading ? (
+              <>
+                Query
+                <span className="pointer-events-none absolute inset-0 flex items-center justify-center">
+                  <Spinner className="size-4 opacity-50" color="white" />
+                </span>
+              </>
+            ) : (
+              "Query"
+            )}
           </Button>
         </div>
       </fetcher.Form>
@@ -996,7 +1009,7 @@ function QueryTitle({
   if (isTitleLoading)
     return (
       <span className="flex items-center gap-2 text-text-dimmed">
-        <Spinner className="size-3" /> Generating title…
+        <Spinner className="size-4" /> Generating title…
       </span>
     );