From 85452a02b734f3070bda058e674d66a878157a8f Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Sun, 26 Apr 2020 21:32:51 +0200
Subject: [PATCH] plugins/graphiql: use dynamic import to load graphiql

---
 .../GraphiQLBrowser/GraphiQLBrowser.tsx       | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx
index e914fd9649..c5a003a496 100644
--- a/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx
+++ b/plugins/graphiql/src/components/GraphiQLBrowser/GraphiQLBrowser.tsx
@@ -14,14 +14,16 @@
  * 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,20 +60,22 @@ export const GraphiQLBrowser: FC<GraphiQLBrowserProps> = ({ endpoints }) => {
 
   return (
     <div className={classes.root}>
-      <Tabs
-        classes={{ root: classes.tabs }}
-        value={tabIndex}
-        onChange={(_, value) => setTabIndex(value)}
-        indicatorColor="primary"
-      >
-        {endpoints.map(({ title }, index) => (
-          <Tab key={index} label={title} value={index} />
-        ))}
-      </Tabs>
-      <Divider />
-      <div className={classes.graphiQlWrapper}>
-        <GraphiQL key={tabIndex} fetcher={fetcher} storage={storage} />
-      </div>
+      <Suspense fallback={<Progress />}>
+        <Tabs
+          classes={{ root: classes.tabs }}
+          value={tabIndex}
+          onChange={(_, value) => setTabIndex(value)}
+          indicatorColor="primary"
+        >
+          {endpoints.map(({ title }, index) => (
+            <Tab key={index} label={title} value={index} />
+          ))}
+        </Tabs>
+        <Divider />
+        <div className={classes.graphiQlWrapper}>
+          <GraphiQL key={tabIndex} fetcher={fetcher} storage={storage} />
+        </div>
+      </Suspense>
     </div>
   );
 };