Use <Progress> instead of <LinearProgress /> in combination with Suspense

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

.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`.

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>

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'}