fix: do not show errors for component items in left panel in case of network failure (#1473)

## Description

Closes #1455

Enhanced error handling and loading states for component items in the Flow Sidebar. Added proper error fallbacks for the `ComponentIcon` and `ComponentItemFromUrl` components, and implemented a skeleton loading state for component items. Also improved the `UpgradeAvailableAlertBox` with an error fallback.

## Type of Change

- [x] Bug fix

## Checklist

- [x] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Instructions

1. Halt backend locally
2. Try to open component folders in left panel
3. Ensure components are still available and visually appealing.

[Screen Recording 2025-12-04 at 2.59.45 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/e063ce93-c799-4fe3-a7f4-01a09887fb94.mov" />](https://app.graphite.com/user-attachments/video/e063ce93-c799-4fe3-a7f4-01a09887fb94.mov)



## Additional Comments

Key changes include:

- Added a type guard function `hasProps` to safely check component icon properties
- Created a `ComponentItemSkeleton` for better loading states
- Added error fallbacks to prevent crashes when components fail to load
- Fixed layout issues by adding `wrap="nowrap"` to prevent component names from breaking
- Improved the suspense wrapper implementation for better error handling

Author: maxy-shpfy

src/components/shared/ReactFlow/FlowSidebar/components/ComponentItem.tsx

@@ -9,6 +9,8 @@ import { withSuspenseWrapper } from "@/components/shared/SuspenseWrapper";
 import { Icon } from "@/components/ui/icon";
 import { InlineStack } from "@/components/ui/layout";
 import { SidebarMenuItem } from "@/components/ui/sidebar";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Spinner } from "@/components/ui/spinner";
 import { useHydrateComponentReference } from "@/hooks/useHydrateComponentReference";
 import { cn } from "@/lib/utils";
 import { useComponentLibrary } from "@/providers/ComponentLibraryProvider";
@@ -34,6 +36,16 @@ const ComponentIconSkeleton = ({
   return <Icon name="File" className="shrink-0 text-gray-400" {...iconProps} />;
 };
 
+function hasProps(props: any): props is ComponentIconProps {
+  return (
+    props !== undefined &&
+    props !== null &&
+    typeof props === "object" &&
+    "name" in props &&
+    "className" in props
+  );
+}
+
 const ComponentIcon = withSuspenseWrapper(
   ({ component, className, ...iconProps }: ComponentIconProps) => {
     const { data: outdatedComponents } = useOutdatedComponents([component]);
@@ -46,6 +58,15 @@ const ComponentIcon = withSuspenseWrapper(
     return <Icon name="BookAlert" className="text-orange-500" />;
   },
   ComponentIconSkeleton,
+  /**
+   * Error fallback to show just the icon
+   */
+  ({ originalProps }) =>
+    hasProps(originalProps) ? (
+      <Icon name={originalProps.name} className={originalProps.className} />
+    ) : (
+      <Icon name="File" className="shrink-0 text-gray-400" />
+    ),
 );
 
 const ComponentMarkup = ({
@@ -174,7 +195,12 @@ const ComponentMarkup = ({
             data-testid="component-item"
             data-component-name={displayName}
           >
-            <InlineStack gap="2" blockAlign="center" className="w-full">
+            <InlineStack
+              gap="2"
+              blockAlign="center"
+              className="w-full"
+              wrap="nowrap"
+            >
               {isRemoteComponentLibrarySearchEnabled ? (
                 <ComponentIcon
                   name={iconName}
@@ -218,6 +244,17 @@ const ComponentMarkup = ({
   );
 };
 
+const ComponentItemSkeleton = () => {
+  return (
+    <SidebarMenuItem className="pl-2 py-1.5">
+      <InlineStack blockAlign="center" gap="2">
+        <Spinner size={10} />
+        <Skeleton size="sm" color="default" />
+      </InlineStack>
+    </SidebarMenuItem>
+  );
+};
+
 const ComponentItemFromUrl = withSuspenseWrapper(
   ({ componentRef }: { componentRef: ComponentReference }) => {
     const hydratedComponent = useHydrateComponentReference(componentRef);
@@ -226,6 +263,8 @@ const ComponentItemFromUrl = withSuspenseWrapper(
 
     return <ComponentMarkup component={hydratedComponent} />;
   },
+  ComponentItemSkeleton,
+  () => null,
 );
 
 interface IONodeSidebarItemProps {

src/components/shared/ReactFlow/FlowSidebar/components/UpgradeAvailableAlertBox.tsx

@@ -26,82 +26,87 @@ const UpgradeAvailableAlertBoxSkeleton = () => {
  *
  * @returns The UpgradeAvailableAlertBox component
  */
-export const UpgradeAvailableAlertBox = withSuspenseWrapper(() => {
-  const notify = useToastNotification();
-  const [dismissed, setDismissed] = useDissmissedStorage();
+export const UpgradeAvailableAlertBox = withSuspenseWrapper(
+  () => {
+    const notify = useToastNotification();
+    const [dismissed, setDismissed] = useDissmissedStorage();
 
-  const { usedComponentsFolder } = useComponentLibrary();
+    const { usedComponentsFolder } = useComponentLibrary();
 
-  const { data: outdatedComponents } = useOutdatedComponents(
-    usedComponentsFolder.components ?? [],
-  );
+    const { data: outdatedComponents } = useOutdatedComponents(
+      usedComponentsFolder.components ?? [],
+    );
 
-  const { notifyNode, getNodeIdsByDigest, fitNodeIntoView } = useNodesOverlay();
+    const { notifyNode, getNodeIdsByDigest, fitNodeIntoView } =
+      useNodesOverlay();
 
-  const dismissCallback = useCallback(() => {
-    setDismissed();
-    notify("Upgrade alert dismissed for next 24 hours", "success");
-  }, [setDismissed, notify]);
+    const dismissCallback = useCallback(() => {
+      setDismissed();
+      notify("Upgrade alert dismissed for next 24 hours", "success");
+    }, [setDismissed, notify]);
 
-  const upgradeAllComponentsCallback = useCallback(async () => {
-    if (outdatedComponents.length === 0) {
-      return;
-    }
+    const upgradeAllComponentsCallback = useCallback(async () => {
+      if (outdatedComponents.length === 0) {
+        return;
+      }
 
-    const nodeIds = outdatedComponents.flatMap(([outdated, _]) =>
-      getNodeIdsByDigest(outdated.digest),
-    );
+      const nodeIds = outdatedComponents.flatMap(([outdated, _]) =>
+        getNodeIdsByDigest(outdated.digest),
+      );
 
-    if (nodeIds.length === 0) {
-      return;
-    }
+      if (nodeIds.length === 0) {
+        return;
+      }
 
-    const nodeId = nodeIds.pop();
+      const nodeId = nodeIds.pop();
 
-    if (!nodeId) {
-      return;
-    }
+      if (!nodeId) {
+        return;
+      }
 
-    await fitNodeIntoView(nodeId);
+      await fitNodeIntoView(nodeId);
 
-    notifyNode(nodeId, {
-      type: "update-overlay",
-      data: {
-        replaceWith: new Map(
-          outdatedComponents.map(([outdated, mrc]) => [outdated.digest, mrc]),
-        ),
-        ids: nodeIds,
-      },
-    });
-  }, [getNodeIdsByDigest, fitNodeIntoView, notifyNode, outdatedComponents]);
+      notifyNode(nodeId, {
+        type: "update-overlay",
+        data: {
+          replaceWith: new Map(
+            outdatedComponents.map(([outdated, mrc]) => [outdated.digest, mrc]),
+          ),
+          ids: nodeIds,
+        },
+      });
+    }, [getNodeIdsByDigest, fitNodeIntoView, notifyNode, outdatedComponents]);
 
-  const showOutdatedComponentsAlert =
-    outdatedComponents.length > 0 && !dismissed;
+    const showOutdatedComponentsAlert =
+      outdatedComponents.length > 0 && !dismissed;
 
-  if (!showOutdatedComponentsAlert) {
-    return null;
-  }
+    if (!showOutdatedComponentsAlert) {
+      return null;
+    }
 
-  return (
-    <BlockStack className="px-2">
-      <InfoBox title="Upgrades available" key="outdated-components">
-        <BlockStack gap="2">
-          <Paragraph size="xs">
-            You have outdated components used in your Pipeline.
-          </Paragraph>
-          <InlineStack align="space-between" className="w-full">
-            <Button size="xs" variant="secondary" onClick={dismissCallback}>
-              Dismiss
-            </Button>
-            <Button size="xs" onClick={upgradeAllComponentsCallback}>
-              Review
-            </Button>
-          </InlineStack>
-        </BlockStack>
-      </InfoBox>
-    </BlockStack>
-  );
-}, UpgradeAvailableAlertBoxSkeleton);
+    return (
+      <BlockStack className="px-2">
+        <InfoBox title="Upgrades available" key="outdated-components">
+          <BlockStack gap="2">
+            <Paragraph size="xs">
+              You have outdated components used in your Pipeline.
+            </Paragraph>
+            <InlineStack align="space-between" className="w-full">
+              <Button size="xs" variant="secondary" onClick={dismissCallback}>
+                Dismiss
+              </Button>
+              <Button size="xs" onClick={upgradeAllComponentsCallback}>
+                Review
+              </Button>
+            </InlineStack>
+          </BlockStack>
+        </InfoBox>
+      </BlockStack>
+    );
+  },
+  UpgradeAvailableAlertBoxSkeleton,
+  () => null,
+);
 
 interface DismissedStorage {
   upgradeAvailableAlertDismissed: Date | undefined;