From a20cbf00d2774df64edb892e97c276d29acd6263 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Mon, 11 Oct 2021 11:10:31 +0200
Subject: [PATCH 1/2] core-components: lazy load syntax highlighter

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/silent-candles-remember.md         |  5 ++
 .../components/CodeSnippet/CodeSnippet.tsx    | 84 +++++++++++--------
 2 files changed, 56 insertions(+), 33 deletions(-)
 create mode 100644 .changeset/silent-candles-remember.md

diff --git a/.changeset/silent-candles-remember.md b/.changeset/silent-candles-remember.md
new file mode 100644
index 0000000000..99061bbc1d
--- /dev/null
+++ b/.changeset/silent-candles-remember.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+The syntax highlighting library used by the `CodeSnippet` component is now lazy loaded.
diff --git a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx
index 3ce041a819..f8a7d2ff9e 100644
--- a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx
+++ b/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} />

From 3ea4a8f8320b58cb8e39229d72e8fce482fd550f Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Tue, 12 Oct 2021 10:07:00 +0200
Subject: [PATCH 2/2] catalog-import: fix test + bump CodeSnippet change to
 minor

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/silent-candles-remember.md                         | 4 ++--
 .../PreviewCatalogInfoComponent.test.tsx                      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.changeset/silent-candles-remember.md b/.changeset/silent-candles-remember.md
index 99061bbc1d..51700c4582 100644
--- a/.changeset/silent-candles-remember.md
+++ b/.changeset/silent-candles-remember.md
@@ -1,5 +1,5 @@
 ---
-'@backstage/core-components': patch
+'@backstage/core-components': minor
 ---
 
-The syntax highlighting library used by the `CodeSnippet` component is now lazy loaded.
+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.
diff --git a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewCatalogInfoComponent.test.tsx b/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewCatalogInfoComponent.test.tsx
index f0844c265c..2618fab57a 100644
--- a/plugins/catalog-import/src/components/StepPrepareCreatePullRequest/PreviewCatalogInfoComponent.test.tsx
+++ b/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();