From e849f9cc0a4a7794c02c80bfede693dbe51d756d Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Tue, 2 Nov 2021 10:00:10 +0100
Subject: [PATCH] Use `<Progress>` instead of `<LinearProgress />` in
 combination with `Suspense`

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
---
 .changeset/dull-mangos-count.md               |  6 ++++++
 .../lib/ActionOutput/ActionOutput.tsx         |  4 ++--
 .../WorkflowRunLogs/WorkflowRunLogs.tsx       | 19 +++++++++----------
 3 files changed, 17 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/dull-mangos-count.md

diff --git a/.changeset/dull-mangos-count.md b/.changeset/dull-mangos-count.md
new file mode 100644
index 0000000000..64a01c121d
--- /dev/null
+++ b/.changeset/dull-mangos-count.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-circleci': patch
+'@backstage/plugin-github-actions': patch
+---
+
+Use `<Progress>` instead of `<LinearProgress />` in combination with `Suspense`.
diff --git a/plugins/circleci/src/components/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx b/plugins/circleci/src/components/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx
index bbfc1e468c..a4c2af241f 100644
--- a/plugins/circleci/src/components/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx
+++ b/plugins/circleci/src/components/BuildWithStepsPage/lib/ActionOutput/ActionOutput.tsx
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
+import { Progress } from '@backstage/core-components';
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  LinearProgress,
   Typography,
 } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
@@ -85,7 +85,7 @@ export const ActionOutput = ({
         {messages.length === 0 ? (
           'Nothing here...'
         ) : (
-          <Suspense fallback={<LinearProgress />}>
+          <Suspense fallback={<Progress />}>
             <div style={{ height: '20vh', width: '100%' }}>
               <LazyLog text={messages.join('\n')} extraLines={1} enableSearch />
             </div>
diff --git a/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx b/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx
index ce33ae3781..399fed9557 100644
--- a/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx
+++ b/plugins/github-actions/src/components/WorkflowRunLogs/WorkflowRunLogs.tsx
@@ -14,12 +14,15 @@
  * limitations under the License.
  */
 
+import { Entity } from '@backstage/catalog-model';
+import { Progress } from '@backstage/core-components';
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
+import { readGitHubIntegrationConfigs } from '@backstage/integration';
 import {
   Accordion,
   AccordionSummary,
   CircularProgress,
   Fade,
-  LinearProgress,
   makeStyles,
   Modal,
   Theme,
@@ -27,15 +30,11 @@ import {
   Typography,
   Zoom,
 } from '@material-ui/core';
-
-import React, { Suspense } from 'react';
-import { useDownloadWorkflowRunLogs } from './useDownloadWorkflowRunLogs';
-import { useProjectName } from '../useProjectName';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import DescriptionIcon from '@material-ui/icons/Description';
-import { Entity } from '@backstage/catalog-model';
-import { readGitHubIntegrationConfigs } from '@backstage/integration';
-import { configApiRef, useApi } from '@backstage/core-plugin-api';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import React, { Suspense } from 'react';
+import { useProjectName } from '../useProjectName';
+import { useDownloadWorkflowRunLogs } from './useDownloadWorkflowRunLogs';
 
 const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
 const LinePart = React.lazy(() => import('react-lazylog/build/LinePart'));
@@ -72,7 +71,7 @@ const DisplayLog = ({
   className: string;
 }) => {
   return (
-    <Suspense fallback={<LinearProgress />}>
+    <Suspense fallback={<Progress />}>
       <div className={className}>
         <LazyLog
           text={jobLogs ?? 'No Values Found'}