feat: Lazy load CodeRenderer with full Prism syntax highlighter

Switches from PrismAsyncLight to Prism to fix [object Object] issue, but makes CodeRenderer lazy to compensate for bundle size.

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';

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';

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 (
+    <Suspense fallback={<Progress size="xs" isIndeterminate />}>
+      <CodeRenderer {...props} />
+    </Suspense>
+  );
+};

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;

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 && <Alert error={error} />}
-      {data && <CodeRenderer contents={filteredData} startingLineNumber={startingLineNumber} {...props} />}
+      {data && <CodeRendererAsync contents={filteredData} startingLineNumber={startingLineNumber} {...props} />}
     </>
   );
 });

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 <CodeRenderer contents={contents} language="json" />;
+    return <CodeRendererAsync contents={contents} language="json" />;
   }
   if (results === undefined) {
     return null;

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 (

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

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 (

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 }) => {
         </Button>
       </HStack>
       <Collapse in={isOpen} animateOpacity>
-        <CodeRenderer contents={contents} copyButton={true} />
+        <CodeRendererAsync contents={contents} copyButton={true} />
       </Collapse>
     </>
   );

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 }) => {
           <ModalCloseButton />
           <ModalBody>
             <Text>Use the following HTML to embed this Insight in another web site:</Text>
-            <CodeRenderer contents={embedCode} copyButton={true} />
+            <CodeRendererAsync contents={embedCode} copyButton={true} />
           </ModalBody>
         </ModalContent>
       </Modal>