message: plugins/graphiql: use dynamic import to load graphiql
diff: * limitations under the License.
  */
  -import React, { FC, useState } from 'react';
  +import React, { FC, useState, Suspense } from 'react';
  import { Tabs, Tab, makeStyles, Typography, Divider } from '@material-ui/core';
  import 'graphiql/graphiql.css';
  -import GraphiQL from 'graphiql';
  import { StorageBucket } from 'lib/storage';
  import { GraphQLEndpoint } from 'lib/api';
  +import { Progress } from '@backstage/core';
  import { BackstageTheme } from '@backstage/theme';
  +const GraphiQL = React.lazy(() => import('graphiql'));
  +
  const useStyles = makeStyles<BackstageTheme>(theme => ({
  root: {
  height: '100%',
  @@ -58,6 +60,7 @@ export const GraphiQLBrowser: FC<GraphiQLBrowserProps> = ({ endpoints }) => {
  return (
  <div className={classes.root}>
  + <Suspense fallback={<Progress />}>
  <Tabs
  classes={{ root: classes.tabs }}
  value={tabIndex}
  @@ -72,6 +75,7 @@ export const GraphiQLBrowser: FC<GraphiQLBrowserProps> = ({ endpoints }) => {
  <div className={classes.graphiQlWrapper}>
  <GraphiQL key={tabIndex} fetcher={fetcher} storage={storage} />
  </div>
  + </Suspense>
  </div>
  );
  };
  