Fix bug in helm chart icon fallback

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+helm-charts/helm-chart-details.scss

@@ -14,6 +14,10 @@
     box-sizing: content-box;
   }
 
+  div.intro-logo {
+    width: 100px;
+  }
+
   .Select__option {
     span.deprecated {
       text-decoration: line-through;

src/renderer/components/+helm-charts/helm-chart-details.tsx

@@ -46,6 +46,7 @@ interface Dependencies {
 
 @observer
 class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Dependencies> {
+  private readonly imgLoadingFailed = observable.set<string>(); // The IDs of the HelmChart instances
   readonly chartVersions = observable.array<HelmChart>();
   readonly selectedChart = observable.box<HelmChart | undefined>();
   readonly readme = observable.box<string | undefined>(undefined);
@@ -118,14 +119,32 @@ class NonInjectedHelmChartDetails extends Component<HelmChartDetailsProps & Depe
     this.props.hideDetails();
   }
 
+  private renderIcon(chart: HelmChart) {
+    const icon = chart.getIcon();
+
+    if (!icon || this.imgLoadingFailed.has(chart.getId())) {
+      return (
+        <div
+          className="intro-logo"
+          dangerouslySetInnerHTML={{ __html: HelmLogoPlaceholder }}
+        />
+      );
+    }
+
+    return (
+      <img
+        className="intro-logo"
+        src={icon}
+        onLoad={evt => evt.currentTarget.classList.add("visible")}
+        onError={() => this.imgLoadingFailed.add(chart.getId())}
+      />
+    );
+  }
+
   renderIntroduction(selectedChart: HelmChart) {
     return (
       <div className="introduction flex align-flex-start">
-        <img
+        {this.renderIcon(selectedChart)}
-          className="intro-logo"
-          src={selectedChart.getIcon() || HelmLogoPlaceholder}
-          onError={(event) => event.currentTarget.src = HelmLogoPlaceholder}
-        />
         <div className="intro-contents box grow">
           <div className="description flex align-center justify-space-between" data-testid="selected-chart-description">
             {selectedChart.getDescription()}

src/renderer/components/+helm-charts/helm-charts.tsx

@@ -12,11 +12,13 @@ import type { HelmChart } from "../../../common/k8s-api/endpoints/helm-charts.ap
 import { HelmChartDetails } from "./helm-chart-details";
 import { ItemListLayout } from "../item-object-list/list-layout";
 import type { IComputedValue } from "mobx";
+import { observable } from "mobx";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import helmChartsRouteParametersInjectable from "./helm-charts-route-parameters.injectable";
 import type { NavigateToHelmCharts } from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable";
 import navigateToHelmChartsInjectable from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable";
+import HelmLogoPlaceholder from "./helm-placeholder.svg";
 
 enum columnId {
   name = "name",
@@ -37,6 +39,8 @@ interface Dependencies {
 
 @observer
 class NonInjectedHelmCharts extends Component<Dependencies> {
+  private readonly imgLoadingFailed = observable.set<string>(); // The IDs of the HelmChart instances
+
   componentDidMount() {
     helmChartStore.loadAll();
   }
@@ -76,6 +80,22 @@ class NonInjectedHelmCharts extends Component<Dependencies> {
     this.showDetails(null);
   };
 
+  private renderIcon(chart: HelmChart) {
+    const icon = chart.getIcon();
+
+    if (!icon || this.imgLoadingFailed.has(chart.getId())) {
+      return <div dangerouslySetInnerHTML={{ __html: HelmLogoPlaceholder }} />;
+    }
+
+    return (
+      <img
+        src={icon}
+        onLoad={evt => evt.currentTarget.classList.add("visible")}
+        onError={() => this.imgLoadingFailed.add(chart.getId())}
+      />
+    );
+  }
+
   render() {
     return (
       <SiblingsInTabLayout>
@@ -114,10 +134,7 @@ class NonInjectedHelmCharts extends Component<Dependencies> {
           ]}
           renderTableContents={chart => [
             <figure key="image">
-              <img
+              {this.renderIcon(chart)}
-                src={chart.getIcon() || require("./helm-placeholder.svg")}
-                onLoad={evt => evt.currentTarget.classList.add("visible")}
-              />
             </figure>,
             chart.getName(),
             chart.getDescription(),