fix: unblock component list loading from pipeline runs

src/components/Components/ComponentsListView/ComponentListView.tsx

@@ -79,23 +79,16 @@ const ComponentListView: React.FC<React.PropsWithChildren<ComponentListViewProps
   const componentPACStates = usePACStatesForComponents(components);
 
   const componentsWithLatestBuild = React.useMemo(() => {
-    if (!componentsLoaded || componentsError || !pipelineRunsLoaded || pipelineRunsError) {
+    if (!componentsLoaded || componentsError) {
       return [];
     }
     return components.map((c) => ({
       ...c,
-      latestBuildPipelineRun: pipelineRuns.find(
+      latestBuildPipelineRun: pipelineRuns?.find(
         (plr) => plr.metadata?.labels?.[PipelineRunLabel.COMPONENT] === c.metadata.name,
       ),
     }));
-  }, [
-    components,
-    componentsError,
-    componentsLoaded,
-    pipelineRuns,
-    pipelineRunsError,
-    pipelineRunsLoaded,
-  ]);
+  }, [components, componentsError, componentsLoaded, pipelineRuns]);
 
   const statusFilters = React.useMemo(
     () => (statusFiltersParam ? statusFiltersParam.split(',') : []),
@@ -207,6 +200,16 @@ const ComponentListView: React.FC<React.PropsWithChildren<ComponentListViewProps
           that run together form an application.
         </Text>
       </TextContent>
+      {pipelineRunsLoaded && pipelineRunsError ? (
+        <Alert
+          className="pf-v5-u-mt-md"
+          variant={AlertVariant.warning}
+          isInline
+          title="Error while fetching pipeline runs"
+        >
+          {(pipelineRunsError as { message: string })?.message}{' '}
+        </Alert>
+      ) : null}
       {gettingStartedCard}
       {componentsLoaded && pipelineRunsLoaded && pendingCount > 0 && !mergeAlertHidden ? (
         <Alert
@@ -253,7 +256,8 @@ const ComponentListView: React.FC<React.PropsWithChildren<ComponentListViewProps
           aria-label="Components List"
           Header={ComponentsListHeader}
           Row={ComponentsListRow}
-          loaded={componentsLoaded && pipelineRunsLoaded}
+          loaded={componentsLoaded}
+          customData={{ pipelineRunsLoaded }}
           getRowProps={(obj: ComponentKind) => ({
             id: `${obj.metadata.name}-component-list-item`,
             'aria-label': obj.metadata.name,

src/components/Components/ComponentsListView/ComponentsListRow.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { Button, Flex, FlexItem } from '@patternfly/react-core';
+import { Button, Flex, FlexItem, Skeleton } from '@patternfly/react-core';
 import { PacStatesForComponents } from '../../../hooks/usePACStatesForComponents';
 import { RowFunctionArgs, TableData } from '../../../shared';
 import ActionMenu from '../../../shared/components/action-menu/ActionMenu';
@@ -27,7 +27,7 @@ export const getContainerImageLink = (url: string) => {
 
 const ComponentsListRow: React.FC<
   RowFunctionArgs<ComponentWithLatestBuildPipeline, PacStatesForComponents>
-> = ({ obj: component }) => {
+> = ({ obj: component, customData }) => {
   const { workspace } = useWorkspaceInfo();
   const applicationName = component.spec.application;
   const name = component.metadata.name;
@@ -81,7 +81,11 @@ const ComponentsListRow: React.FC<
       </TableData>
       <TableData className={componentsTableColumnClasses.latestBuild}>
         <div className="component-list-view__build-completion">
-          <PipelineRunStatus pipelineRun={component.latestBuildPipelineRun} />
+          {component.latestBuildPipelineRun || customData.pipelineRunsLoaded ? (
+            <PipelineRunStatus pipelineRun={component.latestBuildPipelineRun} />
+          ) : (
+            <Skeleton />
+          )}
           <div>
             {commit ? (
               <>