Merge pull request #7546 from backstage/rugvip/testspeed

core-components: lazy load syntax highlighter

.changeset/silent-candles-remember.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+The syntax highlighting library used by the `CodeSnippet` component is now lazy loaded. This most likely has no effect on existing code, but may break tests as the content of the `CodeSnippet` is now rendered asynchronously.

packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx

@@ -14,12 +14,56 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { docco, dark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+import React, { lazy, Suspense } from 'react';
 import { useTheme } from '@material-ui/core';
 import { BackstageTheme } from '@backstage/theme';
 import { CopyTextButton } from '../CopyTextButton';
+import { Progress } from '../Progress';
+
+const LazySyntaxHighlighter = lazy(async () => {
+  const [{ default: SyntaxHighlighter }, { docco, dark }] = await Promise.all([
+    import('react-syntax-highlighter'),
+    import('react-syntax-highlighter/dist/cjs/styles/hljs'),
+  ]);
+
+  function LazyHighlighter(props: CodeSnippetProps) {
+    const {
+      text,
+      language,
+      showLineNumbers = false,
+      highlightedNumbers,
+      customStyle,
+    } = props;
+    const theme = useTheme<BackstageTheme>();
+    const mode = theme.palette.type === 'dark' ? dark : docco;
+    const highlightColor =
+      theme.palette.type === 'dark' ? '#256bf3' : '#e6ffed';
+
+    return (
+      <SyntaxHighlighter
+        customStyle={customStyle}
+        language={language}
+        style={mode}
+        showLineNumbers={showLineNumbers}
+        wrapLines
+        lineNumberStyle={{ color: theme.palette.textVerySubtle }}
+        lineProps={(lineNumber: number) =>
+          highlightedNumbers?.includes(lineNumber)
+            ? {
+                style: {
+                  backgroundColor: highlightColor,
+                },
+              }
+            : {}
+        }
+      >
+        {text}
+      </SyntaxHighlighter>
+    );
+  }
+
+  return { default: LazyHighlighter };
+});
 
 /**
  * Properties for {@link CodeSnippet}
@@ -68,38 +112,12 @@ export interface CodeSnippetProps {
  * providing consistent theming and copy code button
  */
 export function CodeSnippet(props: CodeSnippetProps) {
-  const {
-    text,
-    language,
-    showLineNumbers = false,
-    showCopyCodeButton = false,
-    highlightedNumbers,
-    customStyle,
-  } = props;
-  const theme = useTheme<BackstageTheme>();
-  const mode = theme.palette.type === 'dark' ? dark : docco;
-  const highlightColor = theme.palette.type === 'dark' ? '#256bf3' : '#e6ffed';
+  const { text, showCopyCodeButton = false } = props;
   return (
     <div style={{ position: 'relative' }}>
-      <SyntaxHighlighter
-        customStyle={customStyle}
-        language={language}
-        style={mode}
-        showLineNumbers={showLineNumbers}
-        wrapLines
-        lineNumberStyle={{ color: theme.palette.textVerySubtle }}
-        lineProps={(lineNumber: number) =>
-          highlightedNumbers?.includes(lineNumber)
-            ? {
-                style: {
-                  backgroundColor: highlightColor,
-                },
-              }
-            : {}
-        }
-      >
-        {text}
-      </SyntaxHighlighter>
+      <Suspense fallback={<Progress />}>
+        <LazySyntaxHighlighter {...props} />
+      </Suspense>
       {showCopyCodeButton && (
         <div style={{ position: 'absolute', top: 0, right: 0 }}>
           <CopyTextButton text={text} />

plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewCatalogInfoComponent.test.tsx

@@ -46,7 +46,7 @@ const entities: Entity[] = [
 
 describe('<PreviewCatalogInfoComponent />', () => {
   it('renders without exploding', async () => {
-    const { getByText } = render(
+    const { getByText, findByText } = render(
       <PreviewCatalogInfoComponent
         repositoryUrl="http://my-repository/a/"
         entities={entities}
@@ -54,7 +54,7 @@ describe('<PreviewCatalogInfoComponent />', () => {
     );
 
     const repositoryUrl = getByText('http://my-repository/a/catalog-info.yaml');
-    const kindText = getByText('Kind_2');
+    const kindText = await findByText('Kind_2');
     expect(repositoryUrl).toBeInTheDocument();
     expect(repositoryUrl).toBeVisible();
     expect(kindText).toBeInTheDocument();