upd (#4004)

Author: dimaMachina

.changeset/shy-keys-rest.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/plugin-doc-explorer': patch
+---
+
+show spinner in doc explorer based on `isIntrospecting` value, and not based on `isFetching`

packages/graphiql-plugin-doc-explorer/src/components/__tests__/doc-explorer.spec.tsx

@@ -41,9 +41,7 @@ function makeSchema(fieldName = 'field') {
 }
 
 const defaultSchemaContext = {
-  fetchError: null,
   introspect() {},
-  isFetching: false,
   schema: makeSchema(),
   validationErrors: [],
 };
@@ -69,7 +67,7 @@ describe('DocExplorer', () => {
 
   it('renders spinner when the schema is loading', () => {
     useGraphiQL.mockImplementation(cb =>
-      cb({ ...defaultSchemaContext, isFetching: true }),
+      cb({ ...defaultSchemaContext, isIntrospecting: true }),
     );
     const { container } = render(<DocExplorerWithContext />);
     const spinner = container.querySelectorAll('.graphiql-spinner');

packages/graphiql-plugin-doc-explorer/src/components/doc-explorer.tsx

@@ -9,8 +9,8 @@ import { TypeDocumentation } from './type-documentation';
 import './doc-explorer.css';
 
 export const DocExplorer: FC = () => {
-  const { fetchError, isFetching, schema, validationErrors } = useGraphiQL(
-    pick('fetchError', 'isFetching', 'schema', 'validationErrors'),
+  const { fetchError, isIntrospecting, schema, validationErrors } = useGraphiQL(
+    pick('fetchError', 'isIntrospecting', 'schema', 'validationErrors'),
   );
   const explorerNavStack = useDocExplorer();
   const { pop } = useDocExplorerActions();
@@ -27,7 +27,7 @@ export const DocExplorer: FC = () => {
         Schema is invalid: {validationErrors[0].message}
       </div>
     );
-  } else if (isFetching) {
+  } else if (isIntrospecting) {
     // Schema is undefined when it is being loaded via introspection.
     content = <Spinner />;
   } else if (!schema) {