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
This commit is contained in:
hasura-bot 2021-03-11 01:38:50 +05:30
parent bf8a22083e
commit 43de7cdf17
3 changed files with 23 additions and 62 deletions

View File

@ -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,

View File

@ -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;
};

View File

@ -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,6 +258,16 @@ class OneGraphExplorer extends React.Component {
onMouseUp={this.handleExplorerResizeStop}
>
<div className="gqlexplorer">
{this.props.loading ? (
<div
className={`${styles.height100} ${styles.display_flex}`}
style={{
width: explorerWidth,
}}
>
<Spinner />
</div>
) : (
<GraphiQLExplorer
schema={schema}
query={query}
@ -266,6 +278,7 @@ class OneGraphExplorer extends React.Component {
makeDefaultArg={makeDefaultArg}
width={explorerWidth}
/>
)}
{explorerSeparator}
</div>
{graphiql}