v6: Response pane polish (spinner overlay, consistent inset, table divider) (#4414)

## Summary

Three small fixes to the response pane, grouped since they all touch the
same surface:

- **The loading spinner no longer shifts the layout.** It was rendered
as a flex sibling above the response, so every query pushed the view
picker and results down, then snapped back when the response arrived.
It's now an absolutely-positioned overlay centered over the response
body, so nothing reflows. It's also smaller and uses the accent color to
match the header.
- **Consistent inset across all three response views.** The JSON result
window sat flush against the header, while Tree and Table used different
insets (12/16px and 14px). All three now use the same `var(--px-16)` as
the query and variables editors.
- **Table view rows get their divider back.** The row border referenced
`--border-subtle`, an undefined custom property, so per the CSS spec the
whole declaration was dropped and rows rendered with no separator. It
now uses `--border-muted`.

## Test plan

- [x] Run a slow query. The spinner appears centered over the response
area, and the JSON/Tree/Table view picker above it does not jump or
reflow when the spinner appears or clears.
- [x] With a result showing, confirm the JSON has an even 16px inset on
all sides (matching the query editor), not flush to the header. Switch
to Tree and Table views; the inset is the same in all three.
- [x] Run a query returning a list and switch to Table view. Each row
has a subtle bottom divider, consistent with the header separator.
- [ ] `yarn workspace @graphiql/react test` and `yarn workspace graphiql
test` pass.

Refs: #4219

Author: trevor-scheer

.changeset/response-pane-polish.md

@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/react': patch
+---
+
+Polish the response pane: the loading spinner is now a centered overlay, so the view picker and results no longer jump when a query runs; the JSON, Tree, and Table views share a consistent 16px inset; and Table view rows get their bottom divider back.

packages/graphiql-react/src/components/response-editor.tsx

@@ -6,6 +6,7 @@ import { ImagePreview } from './image-preview';
 import { ResponseHeader } from './response-header';
 import { ResponseTableView } from './response-table-view';
 import { ResponseTreeView } from './response-tree-view';
+import { Spinner } from './spinner';
 import {
   getOrCreateModel,
   createEditor,
@@ -48,6 +49,7 @@ export const ResponseEditor: FC<ResponseEditorProps> = ({
     validationErrors,
     responseEditor,
     uriInstanceId,
+    isFetching,
     lastResponse,
     responseView,
     transport,
@@ -58,6 +60,7 @@ export const ResponseEditor: FC<ResponseEditorProps> = ({
       'validationErrors',
       'responseEditor',
       'uriInstanceId',
+      'isFetching',
       'lastResponse',
       'responseView',
       'transport',
@@ -202,27 +205,32 @@ export const ResponseEditor: FC<ResponseEditorProps> = ({
           onCopy={handleCopy}
         />
       )}
-      <section
-        ref={ref}
-        aria-label="Result Window"
-        aria-live="polite"
-        aria-atomic="true"
-        tabIndex={0}
-        onKeyDown={onEditorContainerKeyDown}
-        className="result-window"
-        hidden={responseView !== 'json'}
-      />
-      {responseView === 'tree' &&
-        (lastResponse ? (
-          <ResponseTreeView data={lastResponse.body} />
-        ) : (
-          <div className="graphiql-response-empty-state" role="status">
-            <span>Run a query to see the tree view.</span>
-          </div>
-        ))}
-      {responseView === 'table' && (
-        <ResponseTableView data={lastResponse?.body} />
-      )}
+      <div className="graphiql-response-body">
+        {isFetching && (
+          <Spinner className="graphiql-response-spinner-overlay" />
+        )}
+        <section
+          ref={ref}
+          aria-label="Result Window"
+          aria-live="polite"
+          aria-atomic="true"
+          tabIndex={0}
+          onKeyDown={onEditorContainerKeyDown}
+          className="result-window"
+          hidden={responseView !== 'json'}
+        />
+        {responseView === 'tree' &&
+          (lastResponse ? (
+            <ResponseTreeView data={lastResponse.body} />
+          ) : (
+            <div className="graphiql-response-empty-state" role="status">
+              <span>Run a query to see the tree view.</span>
+            </div>
+          ))}
+        {responseView === 'table' && (
+          <ResponseTableView data={lastResponse?.body} />
+        )}
+      </div>
     </div>
   );
 };

packages/graphiql-react/src/components/response-header/index.css

@@ -70,9 +70,38 @@
   overflow: hidden;
 }
 
+/* Positions the loading spinner overlay below the header without taking up
+   flex layout space, so it never shifts the header or result body. */
+.graphiql-response-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
 .graphiql-response-pane .result-window {
   flex: 1;
   min-height: 0;
+  padding: var(--px-16);
+}
+
+/* Smaller than the default .graphiql-spinner and tokenized to match the
+   response header, since it floats over polished chrome rather than a bare
+   loading screen. */
+.graphiql-response-spinner-overlay {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  height: 28px;
+  width: 28px;
+
+  &::after {
+    height: 22px;
+    width: 22px;
+    border-color: transparent;
+    border-top-color: oklch(var(--accent-blue));
+  }
 }
 
 .graphiql-response-empty-state {

packages/graphiql-react/src/components/response-table-view/index.css

@@ -1,7 +1,7 @@
 .graphiql-response-table-wrapper {
   flex: 1;
   overflow: auto;
-  padding: var(--px-14);
+  padding: var(--px-16);
 }
 
 .graphiql-response-table:not(:last-child) {
@@ -41,7 +41,7 @@
 
 .graphiql-response-table td {
   padding: var(--px-6) var(--px-12);
-  border-bottom: 1px solid oklch(var(--border-subtle));
+  border-bottom: 1px solid oklch(var(--border-muted));
   vertical-align: top;
   max-width: 320px;
   overflow: hidden;

packages/graphiql-react/src/components/response-tree-view/index.css

@@ -3,7 +3,7 @@
   font-size: var(--font-size-mono);
   line-height: 1.6;
   color: oklch(var(--fg-default));
-  padding: var(--px-12) var(--px-16);
+  padding: var(--px-16);
   overflow: auto;
   flex: 1;
   min-height: 0;

packages/graphiql/src/GraphiQL.tsx

@@ -257,7 +257,6 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
     initialHeaders,
     tabs,
     activeTabIndex,
-    isFetching,
     visiblePlugin,
     operations,
     plugins,
@@ -269,7 +268,6 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
       'initialHeaders',
       'tabs',
       'activeTabIndex',
-      'isFetching',
       'visiblePlugin',
       'operations',
       'plugins',
@@ -614,7 +612,6 @@ export const GraphiQLInterface: FC<GraphiQLInterfaceProps> = ({
                     className="graphiql-response-column"
                   >
                     <div className="graphiql-response">
-                      {isFetching && <Spinner />}
                       <ResponseEditor responseTooltip={responseTooltip} />
                       {footer}
                     </div>