extract loading spinner to @graphiql/react (#2581)

Author: thomasheyenbrock

.changeset/smooth-countries-shout.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+Add `Spinner` component to `@graphiql/react`

packages/graphiql-react/src/ui/index.ts

@@ -1,2 +1,3 @@
 export * from './button';
 export * from './dropdown';
+export * from './spinner';

packages/graphiql-react/src/ui/spinner.css

@@ -0,0 +1,27 @@
+.graphiql-spinner {
+  height: 56px;
+  margin: auto;
+  margin-top: var(--px-16);
+  width: 56px;
+
+  &::after {
+    animation: rotation 0.8s linear 0s infinite;
+    border: 4px solid transparent;
+    border-radius: 100%;
+    border-top: 4px solid var(--color-neutral-40);
+    content: '';
+    display: inline-block;
+    height: 46px;
+    vertical-align: middle;
+    width: 46px;
+  }
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

packages/graphiql-react/src/ui/spinner.tsx

@@ -0,0 +1,5 @@
+import './spinner.css';
+
+export function Spinner() {
+  return <div className="graphiql-spinner" />;
+}

packages/graphiql/__mocks__/@graphiql/react.tsx

@@ -38,6 +38,7 @@ export {
   SchemaContext,
   SchemaContextProvider,
   SettingsIcon,
+  Spinner,
   StopIcon,
   StorageContext,
   StorageContextProvider,
@@ -53,7 +54,6 @@ export {
   useMergeQuery,
   usePrettifyEditors,
   useSchemaContext,
-  useSelectHistoryItem,
   useStorageContext,
 } from '@graphiql/react';
 
@@ -93,15 +93,20 @@ function useMockedEditor(
   onEdit?: (newValue: string) => void,
 ) {
   const editorContext = useEditorContext({ nonNull: true });
-  const [code, setCode] = useState(
-    value ?? editorContext[NAME_TO_INITIAL_VALUE[name]],
-  );
+  const [code, setCode] = useState(() => {
+    const initialValueProp = NAME_TO_INITIAL_VALUE[name];
+    return (
+      value ??
+      (initialValueProp ? editorContext[initialValueProp] : undefined) ??
+      ''
+    );
+  });
   const ref = useRef<HTMLDivElement>(null);
 
   const setEditor =
     editorContext[`set${name.slice(0, 1).toUpperCase()}${name.slice(1)}Editor`];
 
-  const getValueRef = useRef<() => string>();
+  const getValueRef = useRef<() => string>(() => code);
   useEffect(() => {
     getValueRef.current = () => code;
   }, [code]);
@@ -180,28 +185,28 @@ function useMockedEditor(
   return ref;
 }
 
-export const useHeaderEditor: typeof _useHeaderEditor = function useHeaderEditor({
-  onEdit,
-}) {
-  return useMockedEditor('header', undefined, onEdit);
+export const useHeaderEditor: typeof _useHeaderEditor = function useHeaderEditor(
+  props,
+) {
+  return useMockedEditor('header', undefined, props?.onEdit);
 };
 
-export const useQueryEditor: typeof _useQueryEditor = function useQueryEditor({
-  onEdit,
-}) {
-  return useMockedEditor('query', undefined, onEdit);
+export const useQueryEditor: typeof _useQueryEditor = function useQueryEditor(
+  props,
+) {
+  return useMockedEditor('query', undefined, props?.onEdit);
 };
 
-export const useResponseEditor: typeof _useResponseEditor = function useResponseEditor({
-  value,
-}) {
-  return useMockedEditor('response', value);
+export const useResponseEditor: typeof _useResponseEditor = function useResponseEditor(
+  props,
+) {
+  return useMockedEditor('response', props?.value);
 };
 
-export const useVariableEditor: typeof _useVariableEditor = function useVariableEditor({
-  onEdit,
-}) {
-  return useMockedEditor('variable', undefined, onEdit);
+export const useVariableEditor: typeof _useVariableEditor = function useVariableEditor(
+  props,
+) {
+  return useMockedEditor('variable', undefined, props?.onEdit);
 };
 
 export const HeaderEditor: typeof _HeaderEditor = function HeaderEditor(props) {

packages/graphiql/src/components/DocExplorer.tsx

@@ -5,9 +5,9 @@
  *  LICENSE file in the root directory of this source tree.
  */
 
-import React, { ReactNode } from 'react';
+import { Spinner, useExplorerContext, useSchemaContext } from '@graphiql/react';
 import { GraphQLSchema, isType } from 'graphql';
-import { useExplorerContext, useSchemaContext } from '@graphiql/react';
+import React, { ReactNode } from 'react';
 
 import FieldDoc from './DocExplorer/FieldDoc';
 import SchemaDoc from './DocExplorer/SchemaDoc';
@@ -60,7 +60,7 @@ export function DocExplorer(props: DocExplorerProps) {
     );
   } else if (isFetching) {
     // Schema is undefined when it is being loaded via introspection.
-    content = <div className="graphiql-spinner" />;
+    content = <Spinner />;
   } else if (!schema) {
     // Schema is null when it explicitly does not exist, typically due to
     // an error during introspection.

packages/graphiql/src/components/GraphiQL.tsx

@@ -43,6 +43,7 @@ import {
   ResponseEditor,
   SchemaContextProvider,
   SettingsIcon,
+  Spinner,
   StorageContextProvider,
   ToolbarButton,
   UnStyledButton,
@@ -968,7 +969,7 @@ class GraphiQLWithContext extends React.Component<
                 <div ref={this.props.editorResize.secondRef}>
                   <div className="graphiql-response">
                     {this.props.executionContext.isFetching ? (
-                      <div className="graphiql-spinner" />
+                      <Spinner />
                     ) : null}
                     <ResponseEditor
                       value={this.props.response}

packages/graphiql/src/style.css

@@ -145,35 +145,6 @@
   padding: var(--px-16);
 }
 
-/* Generic loading spinner */
-.graphiql-container .graphiql-spinner {
-  height: 56px;
-  left: 50%;
-  position: relative;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 56px;
-}
-.graphiql-container .graphiql-spinner::after {
-  animation: rotation 0.6s infinite linear;
-  border: 4px solid transparent;
-  border-radius: 100%;
-  border-top: 4px solid var(--color-neutral-40);
-  content: '';
-  display: inline-block;
-  height: 46px;
-  vertical-align: middle;
-  width: 46px;
-}
-@keyframes rotation {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
-
 /* Generic drag bar for horizontal resizing */
 .graphiql-container .graphiql-horizontal-drag-bar {
   width: var(--px-12);