From 577f40bc60fd59d1a11b66287808f51724c22137 Mon Sep 17 00:00:00 2001
From: yuneng-jiang <yuneng.jiang@gmail.com>
Date: Tue, 25 Nov 2025 18:05:30 -0800
Subject: [PATCH] ProviderLogo component, test pending

---
 .../molecules/models/ProviderLogo.tsx         | 24 +++++++++++++++++++
 .../components/molecules/models/columns.tsx   | 24 ++-----------------
 2 files changed, 26 insertions(+), 22 deletions(-)
 create mode 100644 ui/litellm-dashboard/src/components/molecules/models/ProviderLogo.tsx

diff --git a/ui/litellm-dashboard/src/components/molecules/models/ProviderLogo.tsx b/ui/litellm-dashboard/src/components/molecules/models/ProviderLogo.tsx
new file mode 100644
index 00000000000..4a9da15e333
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/molecules/models/ProviderLogo.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { getProviderLogoAndName } from "../../provider_info_helpers";
+
+interface ProviderLogoProps {
+  provider: string;
+  className?: string;
+}
+
+export const ProviderLogo: React.FC<ProviderLogoProps> = ({ provider, className = "w-4 h-4" }) => {
+  const [hasError, setHasError] = useState(false);
+  const { logo } = getProviderLogoAndName(provider);
+
+  const showFallback = hasError || !logo;
+
+  if (showFallback) {
+    return (
+      <div className={`${className} rounded-full bg-gray-200 flex items-center justify-center text-xs`}>
+        {provider?.charAt(0) || "-"}
+      </div>
+    );
+  }
+
+  return <img src={logo} alt={`${provider} logo`} className={className} onError={() => setHasError(true)} />;
+};
diff --git a/ui/litellm-dashboard/src/components/molecules/models/columns.tsx b/ui/litellm-dashboard/src/components/molecules/models/columns.tsx
index f6b977226ca..b2e1de28fe5 100644
--- a/ui/litellm-dashboard/src/components/molecules/models/columns.tsx
+++ b/ui/litellm-dashboard/src/components/molecules/models/columns.tsx
@@ -4,6 +4,7 @@ import { Tooltip } from "antd";
 import { getProviderLogoAndName } from "../../provider_info_helpers";
 import { ModelData } from "../../model_dashboard/types";
 import { TrashIcon, KeyIcon } from "@heroicons/react/outline";
+import { ProviderLogo } from "./ProviderLogo";
 
 export const columns = (
   userRole: string,
@@ -62,28 +63,7 @@ export const columns = (
             {/* Provider Icon */}
             <div className="flex-shrink-0 mt-0.5">
               {model.provider ? (
-                <img
-                  src={getProviderLogoAndName(model.provider).logo}
-                  alt={`${model.provider} logo`}
-                  className="w-4 h-4"
-                  onError={(e) => {
-                    const target = e.currentTarget as HTMLImageElement;
-                    const parent = target.parentElement;
-                    if (!parent || !parent.contains(target)) {
-                      return;
-                    }
-
-                    try {
-                      const fallbackDiv = document.createElement("div");
-                      fallbackDiv.className =
-                        "w-4 h-4 rounded-full bg-gray-200 flex items-center justify-center text-xs";
-                      fallbackDiv.textContent = model.provider?.charAt(0) || "-";
-                      parent.replaceChild(fallbackDiv, target);
-                    } catch (error) {
-                      console.error("Failed to replace provider logo fallback:", error);
-                    }
-                  }}
-                />
+                <ProviderLogo provider={model.provider} />
               ) : (
                 <div className="w-4 h-4 rounded-full bg-gray-200 flex items-center justify-center text-xs">-</div>
               )}