Lazy load LazyLog as it is rarely used

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>

.changeset/gold-cobras-stare.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Lazy load `LazyLog` as it is rarely used.

plugins/scaffolder/src/components/TaskPage/TaskPage.tsx

@@ -14,38 +14,40 @@
  * limitations under the License.
  */
 
-import React, { useState, useEffect, memo, useMemo } from 'react';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
-import Stepper from '@material-ui/core/Stepper';
-import Step from '@material-ui/core/Step';
-import StepLabel from '@material-ui/core/StepLabel';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { useParams } from 'react-router';
-import { useTaskEventStream } from '../hooks/useEventStream';
-import LazyLog from 'react-lazylog/build/LazyLog';
+import {
+  Content,
+  ErrorPage,
+  Header,
+  Lifecycle,
+  Page,
+} from '@backstage/core-components';
+import { BackstageTheme } from '@backstage/theme';
 import {
   CircularProgress,
+  LinearProgress,
   Paper,
   StepButton,
   StepIconProps,
 } from '@material-ui/core';
-import { Status, TaskOutput } from '../../types';
-import { DateTime, Interval } from 'luxon';
-import { useInterval } from 'react-use';
-import Check from '@material-ui/icons/Check';
+import Grid from '@material-ui/core/Grid';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
+import Stepper from '@material-ui/core/Stepper';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
 import Cancel from '@material-ui/icons/Cancel';
+import Check from '@material-ui/icons/Check';
 import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
 import classNames from 'classnames';
-import { BackstageTheme } from '@backstage/theme';
+import { DateTime, Interval } from 'luxon';
+import React, { memo, Suspense, useEffect, useMemo, useState } from 'react';
+import { useParams } from 'react-router';
+import { useInterval } from 'react-use';
+import { Status, TaskOutput } from '../../types';
+import { useTaskEventStream } from '../hooks/useEventStream';
 import { TaskPageLinks } from './TaskPageLinks';
-import {
-  Page,
-  Header,
-  Lifecycle,
-  Content,
-  ErrorPage,
-} from '@backstage/core-components';
+
+const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
 
 // typings are wrong for this library, so fallback to not parsing types.
 const humanizeDuration = require('humanize-duration');
@@ -213,9 +215,17 @@ export const TaskStatusStepper = memo(
 
 const TaskLogger = memo(({ log }: { log: string }) => {
   return (
-    <div style={{ height: '80vh' }}>
-      <LazyLog text={log} extraLines={1} follow selectableLines enableSearch />
-    </div>
+    <Suspense fallback={<LinearProgress />}>
+      <div style={{ height: '80vh' }}>
+        <LazyLog
+          text={log}
+          extraLines={1}
+          follow
+          selectableLines
+          enableSearch
+        />
+      </div>
+    </Suspense>
   );
 });
 

plugins/techdocs/src/reader/components/TechDocsBuildLogs.test.tsx

@@ -23,9 +23,9 @@ import {
 
 // react-lazylog is based on a react-virtualized component which doesn't
 // write the content to the dom, so we mock it.
-jest.mock('react-lazylog', () => {
+jest.mock('react-lazylog/build/LazyLog', () => {
   return {
-    LazyLog: ({ text }: { text: string }) => {
+    default: ({ text }: { text: string }) => {
       return <p>{text}</p>;
     },
   };
@@ -46,18 +46,20 @@ describe('<TechDocsBuildLogs />', () => {
 });
 
 describe('<TechDocsBuildLogsDrawerContent />', () => {
-  it('should render with empty log', () => {
+  it('should render with empty log', async () => {
     const onClose = jest.fn();
     const rendered = render(
       <TechDocsBuildLogsDrawerContent buildLog={[]} onClose={onClose} />,
     );
     expect(rendered.getByText(/Build Details/i)).toBeInTheDocument();
-    expect(rendered.getByText(/Waiting for logs.../i)).toBeInTheDocument();
+    expect(
+      await rendered.findByText(/Waiting for logs.../i),
+    ).toBeInTheDocument();
 
     expect(onClose).toBeCalledTimes(0);
   });
 
-  it('should render with empty logs', () => {
+  it('should render logs', async () => {
     const onClose = jest.fn();
     const rendered = render(
       <TechDocsBuildLogsDrawerContent
@@ -66,11 +68,8 @@ describe('<TechDocsBuildLogsDrawerContent />', () => {
       />,
     );
     expect(rendered.getByText(/Build Details/i)).toBeInTheDocument();
-    expect(
-      rendered.queryByText(/Waiting for logs.../i),
-    ).not.toBeInTheDocument();
-    expect(rendered.getByText(/Line 1/i)).toBeInTheDocument();
-    expect(rendered.getByText(/Line 2/i)).toBeInTheDocument();
+    expect(await rendered.findByText(/Line 1/i)).toBeInTheDocument();
+    expect(await rendered.findByText(/Line 2/i)).toBeInTheDocument();
 
     expect(onClose).toBeCalledTimes(0);
   });
@@ -80,7 +79,7 @@ describe('<TechDocsBuildLogsDrawerContent />', () => {
     const rendered = render(
       <TechDocsBuildLogsDrawerContent buildLog={[]} onClose={onClose} />,
     );
-    rendered.getByRole('button').click();
+    rendered.getByTitle('Close the drawer').click();
 
     expect(onClose).toBeCalledTimes(1);
   });

plugins/techdocs/src/reader/components/TechDocsBuildLogs.tsx

@@ -20,14 +20,15 @@ import {
   Drawer,
   Grid,
   IconButton,
+  LinearProgress,
   makeStyles,
   Theme,
   Typography,
 } from '@material-ui/core';
 import Close from '@material-ui/icons/Close';
-import * as React from 'react';
-import { useState } from 'react';
-import { LazyLog } from 'react-lazylog';
+import React, { Suspense, useState } from 'react';
+
+const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
 
 const useDrawerStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -83,15 +84,17 @@ export const TechDocsBuildLogsDrawerContent = ({
         </IconButton>
       </Grid>
 
-      <LazyLog
-        text={
-          buildLog.length === 0 ? 'Waiting for logs...' : buildLog.join('\n')
-        }
-        extraLines={1}
-        follow
-        selectableLines
-        enableSearch
-      />
+      <Suspense fallback={<LinearProgress />}>
+        <LazyLog
+          text={
+            buildLog.length === 0 ? 'Waiting for logs...' : buildLog.join('\n')
+          }
+          extraLines={1}
+          follow
+          selectableLines
+          enableSearch
+        />
+      </Suspense>
     </Grid>
   );
 };