core-components: lazy load log viewer

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/core-components/src/components/LogViewer/LazyLogViewer.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * 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 React, { lazy, Suspense } from 'react';
+import { useApp } from '@backstage/core-plugin-api';
+import { LogViewerProps } from './LogViewer';
+
+const LogViewer = lazy(() =>
+  import('./LogViewer').then(m => ({ default: m.LogViewer })),
+);
+
+export function LazyLogViewer(props: LogViewerProps) {
+  const { Progress } = useApp().getComponents();
+  return (
+    <Suspense fallback={<Progress />}>
+      <LogViewer {...props} />
+    </Suspense>
+  );
+}

packages/core-components/src/components/LogViewer/index.ts

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export { LogViewer } from './LogViewer';
+export { LazyLogViewer as LogViewer } from './LazyLogViewer';
 export type { LogViewerProps } from './LogViewer';