diff --git a/packages/frontend/src/components/file-viewer/file-viewer.tsx b/packages/frontend/src/components/file-viewer/file-viewer.tsx
index eecb559eb..da8075a93 100644
--- a/packages/frontend/src/components/file-viewer/file-viewer.tsx
+++ b/packages/frontend/src/components/file-viewer/file-viewer.tsx
@@ -29,7 +29,7 @@ import { getCompletePath } from '../../shared/url-utils';
import { useScrollToLocation } from '../../shared/use-scroll-to-location';
import { useFetch } from '../../shared/useFetch';
import { MarkdownContainer } from '../markdown-container/markdown-container';
-import { CodeRenderer } from '../renderers/code-renderer/code-renderer';
+import { CodeRendererAsync as CodeRenderer } from '../renderers/code-renderer/code-renderer-async';
import { CsvRenderer } from '../renderers/csv-renderer/csv-renderer';
import { HtmlRenderer } from '../renderers/html-renderer/html-renderer';
import { ImageRenderer } from '../renderers/image-renderer/image-renderer';
diff --git a/packages/frontend/src/components/markdown-container/chakra-ui-renderer.tsx b/packages/frontend/src/components/markdown-container/chakra-ui-renderer.tsx
index d76666210..c17d486a9 100644
--- a/packages/frontend/src/components/markdown-container/chakra-ui-renderer.tsx
+++ b/packages/frontend/src/components/markdown-container/chakra-ui-renderer.tsx
@@ -49,7 +49,7 @@ import { BlockQuote } from '../blockquote/blockquote';
import { FetchInsightConnectionCard } from '../insight-connection-card/fetch-insight-connection-card';
import { FetchInsightList } from '../insight-list/fetch-insight-list';
import { Link } from '../link/link';
-import { CodeRenderer } from '../renderers/code-renderer/code-renderer';
+import { CodeRendererAsync as CodeRenderer } from '../renderers/code-renderer/code-renderer-async';
import { FetchCodeRenderer } from '../renderers/code-renderer/fetch-code-renderer';
import { KaTeXRendererAsync } from '../renderers/katex-renderer/katex-renderer-async';
import { VegaRendererAsync } from '../renderers/vega-renderer/vega-renderer-async';
diff --git a/packages/frontend/src/components/renderers/code-renderer/code-renderer-async.tsx b/packages/frontend/src/components/renderers/code-renderer/code-renderer-async.tsx
new file mode 100644
index 000000000..3ad1c5b16
--- /dev/null
+++ b/packages/frontend/src/components/renderers/code-renderer/code-renderer-async.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright 2023 Expedia, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Progress } from '@chakra-ui/react';
+import { lazy, Suspense } from 'react';
+
+const CodeRenderer = lazy(() => import('./code-renderer'));
+
+export const CodeRendererAsync = (props: any) => {
+ return (
+ }>
+
+
+ );
+};
diff --git a/packages/frontend/src/components/renderers/code-renderer/code-renderer.tsx b/packages/frontend/src/components/renderers/code-renderer/code-renderer.tsx
index b3202366d..f80532a40 100644
--- a/packages/frontend/src/components/renderers/code-renderer/code-renderer.tsx
+++ b/packages/frontend/src/components/renderers/code-renderer/code-renderer.tsx
@@ -17,7 +17,7 @@
import type { BoxProps } from '@chakra-ui/react';
import { Box, Collapse, HStack, IconButton, Code, useClipboard, useDisclosure } from '@chakra-ui/react';
import { memo, useEffect } from 'react';
-import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { nord } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { iconFactoryAs } from '../../../shared/icon-factory';
@@ -114,3 +114,5 @@ export const CodeRenderer = memo(
);
}
);
+
+export default CodeRenderer;
diff --git a/packages/frontend/src/components/renderers/code-renderer/fetch-code-renderer.tsx b/packages/frontend/src/components/renderers/code-renderer/fetch-code-renderer.tsx
index 4a796e7b1..10a5e5d37 100644
--- a/packages/frontend/src/components/renderers/code-renderer/fetch-code-renderer.tsx
+++ b/packages/frontend/src/components/renderers/code-renderer/fetch-code-renderer.tsx
@@ -23,7 +23,7 @@ import { useFetch } from '../../../shared/useFetch';
import { Alert } from '../../alert/alert';
import type { CodeRendererProps } from './code-renderer';
-import { CodeRenderer } from './code-renderer';
+import { CodeRendererAsync } from './code-renderer-async';
type Props = CodeRendererProps & {
url: string;
@@ -44,7 +44,7 @@ export const FetchCodeRenderer = memo(({ url, lines, ...props }: Props & BoxProp
return (
<>
{error && }
- {data && }
+ {data && }
>
);
});
diff --git a/packages/frontend/src/components/renderers/json-renderer/json-renderer.tsx b/packages/frontend/src/components/renderers/json-renderer/json-renderer.tsx
index 64f1faf6f..9c63871f5 100644
--- a/packages/frontend/src/components/renderers/json-renderer/json-renderer.tsx
+++ b/packages/frontend/src/components/renderers/json-renderer/json-renderer.tsx
@@ -16,8 +16,7 @@
import { useMemo, useState } from 'react';
-import { Alert } from '../../alert/alert';
-import { CodeRenderer } from '../code-renderer/code-renderer';
+import { CodeRendererAsync } from '../code-renderer/code-renderer-async';
import { TableRenderer } from '../table-renderer/table-renderer';
export const JsonRenderer = ({ contents }) => {
@@ -47,7 +46,7 @@ export const JsonRenderer = ({ contents }) => {
if (error) {
// Fallback to displaying the contents as a code snippet
- return ;
+ return ;
}
if (results === undefined) {
return null;
diff --git a/packages/frontend/src/components/renderers/katex-renderer/katex-renderer-async.tsx b/packages/frontend/src/components/renderers/katex-renderer/katex-renderer-async.tsx
index 0cb0946a1..818db015f 100644
--- a/packages/frontend/src/components/renderers/katex-renderer/katex-renderer-async.tsx
+++ b/packages/frontend/src/components/renderers/katex-renderer/katex-renderer-async.tsx
@@ -17,7 +17,7 @@
import { Progress } from '@chakra-ui/react';
import { lazy, Suspense } from 'react';
-const KaTeX = lazy(() => import(/* webpackChunkName: "katex" */ './katex-renderer'));
+const KaTeX = lazy(() => import('./katex-renderer'));
export const KaTeXRendererAsync = (props: any) => {
return (
diff --git a/packages/frontend/src/components/renderers/vega-renderer/vega-renderer-async.tsx b/packages/frontend/src/components/renderers/vega-renderer/vega-renderer-async.tsx
index 512dab90d..409f019f0 100644
--- a/packages/frontend/src/components/renderers/vega-renderer/vega-renderer-async.tsx
+++ b/packages/frontend/src/components/renderers/vega-renderer/vega-renderer-async.tsx
@@ -18,7 +18,7 @@ import type { BoxProps } from '@chakra-ui/react';
import { Progress } from '@chakra-ui/react';
import { lazy, Suspense } from 'react';
-const VegaRenderer = lazy(() => import(/* webpackChunkName: "vega-renderer" */ './vega-renderer'));
+const VegaRenderer = lazy(() => import('./vega-renderer'));
export const VegaRendererAsync = (
props: { specString: string; transformAssetUri: (uri: string) => string } & BoxProps
diff --git a/packages/frontend/src/components/renderers/xkcd-chart-renderer/xkcd-chart-renderer-async.tsx b/packages/frontend/src/components/renderers/xkcd-chart-renderer/xkcd-chart-renderer-async.tsx
index bd13dc1a1..5c0266391 100644
--- a/packages/frontend/src/components/renderers/xkcd-chart-renderer/xkcd-chart-renderer-async.tsx
+++ b/packages/frontend/src/components/renderers/xkcd-chart-renderer/xkcd-chart-renderer-async.tsx
@@ -18,7 +18,7 @@ import type { BoxProps } from '@chakra-ui/react';
import { Progress } from '@chakra-ui/react';
import { lazy, Suspense } from 'react';
-const XkcdChartRenderer = lazy(() => import(/* webpackChunkName: "xkcd-chart-renderer" */ './xkcd-chart-renderer'));
+const XkcdChartRenderer = lazy(() => import('./xkcd-chart-renderer'));
export const XkcdChartRendererAsync = (props: { type: string; configString: string } & BoxProps) => {
return (
diff --git a/packages/frontend/src/pages/help-page/components/integrations-page/integrations-page.tsx b/packages/frontend/src/pages/help-page/components/integrations-page/integrations-page.tsx
index fdbc8270c..4145ad1cc 100644
--- a/packages/frontend/src/pages/help-page/components/integrations-page/integrations-page.tsx
+++ b/packages/frontend/src/pages/help-page/components/integrations-page/integrations-page.tsx
@@ -23,7 +23,7 @@ import { Crumbs } from '../../../../components/crumbs/crumbs';
import { ExternalLink } from '../../../../components/external-link/external-link';
import { IexHeading } from '../../../../components/iex-heading/iex-heading';
import { Link } from '../../../../components/link/link';
-import { CodeRenderer } from '../../../../components/renderers/code-renderer/code-renderer';
+import { CodeRendererAsync } from '../../../../components/renderers/code-renderer/code-renderer-async';
import { iconFactoryAs } from '../../../../shared/icon-factory';
import { HelpSidebar } from '../help-sidebar/help-sidebar';
@@ -52,7 +52,7 @@ const Bookmarklet = ({ name, contents }) => {
-
+
>
);
diff --git a/packages/frontend/src/pages/insight-page/components/insight-viewer/components/share-menu/share-menu.tsx b/packages/frontend/src/pages/insight-page/components/insight-viewer/components/share-menu/share-menu.tsx
index fc9bda14d..3cc77fbf6 100644
--- a/packages/frontend/src/pages/insight-page/components/insight-viewer/components/share-menu/share-menu.tsx
+++ b/packages/frontend/src/pages/insight-page/components/insight-viewer/components/share-menu/share-menu.tsx
@@ -29,7 +29,7 @@ import {
import { IconButtonMenu } from '../../../../../../components/icon-button-menu/icon-button-menu';
import { IexMenuItem } from '../../../../../../components/iex-menu-item/iex-menu-item';
-import { CodeRenderer } from '../../../../../../components/renderers/code-renderer/code-renderer';
+import { CodeRendererAsync } from '../../../../../../components/renderers/code-renderer/code-renderer-async';
import type { Insight } from '../../../../../../models/generated/graphql';
import { iconFactory } from '../../../../../../shared/icon-factory';
@@ -55,7 +55,7 @@ const EmbedModal = ({ insight }: { insight: Insight }) => {
Use the following HTML to embed this Insight in another web site:
-
+