console: add loading spinner for graphiql to indicate that introspection is in progress

GITHUB_PR_NUMBER: 5873
GITHUB_PR_URL: https://github.com/hasura/graphql-engine/pull/5873

Co-authored-by: Varun Choudhary <68095256+Varun-Choudhary@users.noreply.github.com>
GitOrigin-RevId: efb51dd44a99e82769f4e384c76a08088195c20d

console/src/components/Services/ApiExplorer/ApiExplorer.js

@@ -7,51 +7,7 @@ import ApiRequestWrapper from './ApiRequestWrapper';
 import globals from '../../../Globals';
 import { getTables } from '../../../metadata/selector';
 
-/*
-import ApiCollectionPanel from './ApiCollectionPanel';
-
-import {
-  changeTabSelection,
-  changeApiSelection,
-  expandAuthApi,
-  clearHistory,
-  // changeRequestParams,
-} from './Actions';
-
-import {triggerOnBoarding} from '../Main/Actions';
-*/
-
 class ApiExplorer extends Component {
-  /*
-  onTabSelectionChanged = tabIndex => {
-    this.props.dispatch(changeTabSelection(tabIndex));
-  };
-
-  onApiSelectionChanged = (selectedApi, authApiExpanded) => {
-    this.props.dispatch(changeApiSelection(selectedApi, authApiExpanded));
-  };
-
-  onAuthApiExpanded = index => {
-    this.props.dispatch(expandAuthApi(index));
-  };
-
-  onClearHistoryClicked = () => {
-    this.props.dispatch(clearHistory());
-  };
-
-  getDQBQuery(propsObj) {
-    const { type, args } = propsObj;
-    const _query = {};
-    _query.type = type;
-    _query.args = JSON.parse(JSON.stringify(args));
-    return _query;
-  }
-
-  updateDQBState(data) {
-    this.props.dispatch(hydrateDQBData(data));
-  }
-  */
-
   render() {
     const {
       displayedApi,

console/src/components/Services/ApiExplorer/ApiRequestWrapper.js

@@ -2,20 +2,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ApiRequest from './ApiRequest/ApiRequest';
 import ApiResponse from './ApiResponse/ApiResponse';
-// import ApiRequestDetails from './ApiRequestDetails';
 
 class ApiRequestWrapper extends Component {
   render() {
     const styles = require('./ApiExplorer.scss');
 
     const getAPIRequestDetailsSection = () => {
-      // return (
-      //   <ApiRequestDetails
-      //     title={this.props.details.title}
-      //     description={this.props.details.description}
-      //   />
-      // );
-
       return null;
     };
 

console/src/components/Services/ApiExplorer/OneGraphExplorer/OneGraphExplorer.js

@@ -17,6 +17,8 @@ import { getHeadersAsJSON } from '../utils';
 
 import '../GraphiQLWrapper/GraphiQL.css';
 import './OneGraphExplorer.css';
+import styles from '../ApiExplorer.scss';
+import Spinner from '../../../Common/Spinner/Spinner';
 import {
   showErrorNotification,
   showWarningNotification,
@@ -256,16 +258,27 @@ class OneGraphExplorer extends React.Component {
         onMouseUp={this.handleExplorerResizeStop}
       >
         <div className="gqlexplorer">
-          <GraphiQLExplorer
-            schema={schema}
-            query={query}
-            onEdit={this.editQuery}
-            explorerIsOpen={explorerOpen}
-            onToggleExplorer={this.handleToggle}
-            getDefaultScalarArgValue={getDefaultScalarArgValue}
-            makeDefaultArg={makeDefaultArg}
-            width={explorerWidth}
-          />
+          {this.props.loading ? (
+            <div
+              className={`${styles.height100} ${styles.display_flex}`}
+              style={{
+                width: explorerWidth,
+              }}
+            >
+              <Spinner />
+            </div>
+          ) : (
+            <GraphiQLExplorer
+              schema={schema}
+              query={query}
+              onEdit={this.editQuery}
+              explorerIsOpen={explorerOpen}
+              onToggleExplorer={this.handleToggle}
+              getDefaultScalarArgValue={getDefaultScalarArgValue}
+              makeDefaultArg={makeDefaultArg}
+              width={explorerWidth}
+            />
+          )}
           {explorerSeparator}
         </div>
         {graphiql}