feat: removed LoadingInline wrapper and updated the LoadingBox component

Author: anwesha-palit-redhat

src/components/Loading.tsx

@@ -15,10 +15,7 @@ export const Loading: FC<LoadingProps> = ({
   ariaLabel,
 }) => (
   <Bullseye data-test="loading-indicator" className={className}>
-    <Spinner size={size} isInline={isInline} aria-label={ariaLabel} />
+    <Spinner size={size ?? 'lg'} isInline={isInline} aria-label={ariaLabel} />
   </Bullseye>
 );
 Loading.displayName = 'Loading';
-
-export const LoadingInline: FC = () => <Loading isInline={true} />;
-LoadingInline.displayName = 'LoadingInline';

src/components/common/ResourceDropdown.tsx

@@ -21,19 +21,15 @@ import {
   SearchInput,
   Divider,
 } from '@patternfly/react-core';
-import { LoadingInline } from '../Loading';
+import { Loading } from '../Loading';
 
 type DropdownItemProps = {
   name: string;
   namespace?: string;
   resource: K8sResourceKind;
 };
 
-const DropdownItem: FC<DropdownItemProps> = ({
-  name,
-  namespace,
-  resource,
-}) => {
+const DropdownItem: FC<DropdownItemProps> = ({ name, namespace, resource }) => {
   return (
     <span className="co-resource-item">
       <span className="">
@@ -151,7 +147,7 @@ const ResourceDropdown: FC<ResourceDropdownProps> = (props) => {
     loaded ? (
       <span className="btn-dropdown__item--placeholder">{placeholder}</span>
     ) : (
-      <LoadingInline />
+      <Loading isInline={true} />
     ),
   );
   const [isOpen, setIsOpen] = useState(false);
@@ -263,7 +259,7 @@ const ResourceDropdown: FC<ResourceDropdownProps> = (props) => {
   // Handle data updates and initial load
   useEffect(() => {
     if (!loaded && !loadError) {
-      setTitle(<LoadingInline />);
+      setTitle(<Loading isInline={true} />);
       return;
     }
 

src/components/common/StorageClassDropdown.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode, MouseEvent, Ref } from 'react';
 import { Component } from 'react';
-import { LoadingInline } from '../Loading';
+import { Loading } from '../Loading';
 import _ from 'lodash';
 import {
   FormGroup,
@@ -105,7 +105,7 @@ export class StorageClassDropdownInnerWithTranslation extends Component<
     items: {},
     name: this.props.name,
     selectedKey: this.props.selectedKey,
-    title: <LoadingInline />,
+    title: <Loading isInline={true} />,
     defaultClass: this.props.defaultClass,
     isOpen: false,
     filterValue: '',
@@ -281,7 +281,7 @@ export class StorageClassDropdownInnerWithTranslation extends Component<
 
     // Only show the dropdown if 'no storage class' is not the only option which depends on defaultClass
     const itemsAvailableToShow = defaultClass || _.size(this.state.items) > 1;
-    
+
     const toggle = (toggleRef: Ref<MenuToggleElement>) => (
       <MenuToggle
         ref={toggleRef}

src/components/common/button-bar.jsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import * as PropTypes from 'prop-types';
 import { Alert, AlertGroup } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { LoadingInline } from '../status/status-box';
+import { Loading } from '../Loading';
 
 const injectDisabled = (children, disabled) => {
   return Children.map(children, (c) => {
@@ -67,7 +67,7 @@ export const ButtonBar = ({
         {successMessage && <SuccessMessage message={successMessage} />}
         {errorMessage && <ErrorMessage message={errorMessage} />}
         {injectDisabled(children, inProgress)}
-        {inProgress && <LoadingInline />}
+        {inProgress && <Loading isInline={true} />}
         {infoMessage && <InfoMessage message={infoMessage} />}
       </AlertGroup>
     </div>

src/components/logs/LogSnippetFromPod.tsx

@@ -2,7 +2,7 @@ import type { ReactNode, FC } from 'react';
 import { useState, useEffect } from 'react';
 import { Alert } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { LoadingInline } from '../Loading';
+import { Loading } from '../Loading';
 import { consoleFetchText } from '@openshift-console/dynamic-plugin-sdk';
 import { PodModel } from '../../models';
 import { resourceURL } from '../utils/k8s-utils';
@@ -87,7 +87,7 @@ const LogSnippetFromPod: FC<LogSnippetFromPodProps> = ({
   }
 
   if (!logSnippet) {
-    return <LoadingInline />;
+    return <Loading isInline={true} />;
   }
 
   return <>{children(logSnippet)}</>;

src/components/logs/Logs.tsx

@@ -11,7 +11,7 @@ import { ContainerSpec, ContainerStatus, PodKind } from '../../types';
 import { PodModel } from '../../models';
 import { resourceURL } from '../utils/k8s-utils';
 import { containerToLogSourceStatus } from '../utils/pipeline-utils';
-import { LoadingInline } from '../Loading';
+import { Loading } from '../Loading';
 import {
   getMultiClusterLogsUrl,
   getMultiClusterLogsStreamPath,
@@ -428,7 +428,7 @@ const Logs: FC<LogsProps> = ({
             </span>
             {stillFetching ? (
               <span data-test-id="loading-indicator">
-                <LoadingInline />
+                <Loading isInline={true} />
               </span>
             ) : null}
           </Banner>

src/components/logs/LogsWrapperComponent.tsx

@@ -18,7 +18,7 @@ import { PodKind, TaskRunKind } from '../../types';
 import { MultiStreamLogs } from './MultiStreamLogs';
 import { TektonTaskRunLog } from './TektonTaskRunLog';
 import { useFullscreen } from './fullscreen';
-import { LoadingInline } from '../Loading';
+import { Loading } from '../Loading';
 import { TektonResourceLabel } from '../../consts';
 import { getMultiClusterPods } from '../utils/multi-cluster-api';
 import { usePoll } from '../pipelines-metrics/poll-hook';
@@ -175,7 +175,7 @@ const LogsWrapperComponent: FC<
               <span className="pf-v6-l-flex pf-m-row pf-m-gap-sm pf-m-align-items-center">
                 <DownloadIcon />
                 <span>{downloadAllLabel || t('Download all')}</span>
-                {downloadAllStatus && <LoadingInline />}
+                {downloadAllStatus && <Loading isInline={true} />}
               </span>
             </Button>
             <div>|</div>

src/components/logs/TektonTaskRunLog.tsx

@@ -4,7 +4,7 @@ import { LogViewer } from '@patternfly/react-log-viewer';
 import { HttpError } from '@openshift-console/dynamic-plugin-sdk/lib/utils/error/http-error';
 import { TaskRunKind } from '../../types';
 import { TektonResourceLabel } from '../../consts';
-import { LoadingInline } from '../Loading';
+import { Loading } from '../Loading';
 import { useTRTaskRunLog } from '../hooks/useTektonResult';
 import { Banner } from '@patternfly/react-core';
 import './TektonTaskRunLog.scss';
@@ -68,7 +68,7 @@ export const TektonTaskRunLog: FC<TektonTaskRunLogProps> = ({
               </span>
               {!trLoaded && !errorMessage ? (
                 <span data-test-id="loading-indicator">
-                  <LoadingInline />
+                  <Loading isInline={true} />
                 </span>
               ) : null}
             </Banner>

src/components/pipelineRuns-details/PipelineRunVisualization.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { usePipelineFromPipelineRun } from '../hooks/usePipelineFromPipelineRun';
 import { useTaskRuns } from '../hooks/useTaskRuns';
 import { ComputedStatus, PipelineKind, PipelineRunKind } from '../../types';
-import { LoadingInline } from '../Loading';
+import { LoadingBox } from '../status/status-box';
 import PipelineVisualization from '../pipelines-details/PipelineVisualization';
 import { pipelineRunFilterReducer } from '../utils/pipeline-filter-reducer';
 import './PipelineRunVisualization.scss';
@@ -37,10 +37,10 @@ const PipelineRunVisualization: FC<PipelineRunVisualizationProps> = ({
   /* this needs decoupling */
   const taskRunsLoaded = k8sLoaded || trLoaded;
   const pipeline: PipelineKind = usePipelineFromPipelineRun(pipelineRun);
-  if (!pipeline) {
+  if (!pipeline || !taskRunsLoaded) {
     return (
       <div className="pipeline-plr-loader">
-        <LoadingInline />
+        <LoadingBox />
       </div>
     );
   }

src/components/pipelines-list/status/LinkedPipelineRunTaskStatus.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
 import { PipelineRunKind, TaskRunKind } from '../../../types';
 import { PipelineBars, PipelineBarsForTaskRunsStatus } from './PipelineBars';
-import { LoadingInline } from '../../Loading';
+import { Loading } from '../../Loading';
 import { PipelineRunModel } from '../../../models';
 import { getReferenceForModel } from '../../pipelines-overview/utils';
 import { TaskStatus } from '../../utils/pipeline-augment';
@@ -51,7 +51,7 @@ const LinkedPipelineRunTaskStatus: FC<LinkedPipelineRunTaskStatusProps> = ({
     ) : taskRunsLoaded && taskRuns?.length === 0 && !taskRunStatusObj ? (
       <>{'-'}</>
     ) : (
-      <LoadingInline />
+      <Loading isInline={true} />
     );
 
   if (pipelineRun.metadata?.name && pipelineRun.metadata?.namespace) {