From 9682a3d026c2814fc471c35d5f2b342881a158ed Mon Sep 17 00:00:00 2001
From: Martin Rohrmeier <martin.ra.rohrmeier@bmw.de>
Date: Tue, 30 Jan 2024 11:48:56 +0100
Subject: [PATCH] fix(image): render image with loader when specified

---
 CHANGELOG.md                         |  4 ++++
 package.json                         |  2 +-
 src/components/basic/Image/index.tsx | 15 ++++++++++++---
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f8a9d47f..c0ed229e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.1.23
+
+- Render images directly with loader when specified
+
 ## 2.1.22
 
 - Select list default value functionality fix
diff --git a/package.json b/package.json
index dfe2a6d4..48b716f6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "2.1.22",
+  "version": "2.1.23",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",
diff --git a/src/components/basic/Image/index.tsx b/src/components/basic/Image/index.tsx
index c3b7f7de..ac68eab9 100644
--- a/src/components/basic/Image/index.tsx
+++ b/src/components/basic/Image/index.tsx
@@ -1,6 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2021, 2023 BMW Group AG
- * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ * Copyright (c) 2021, 2024 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
@@ -69,13 +68,23 @@ export const Image = ({ src, alt, style, loader }: ImageProps): JSX.Element => {
     }
   }, [src, loader])
 
+  const renderByLoader = () => {
+    setLoad(true)
+    getData().catch((e) => {
+      setError(true)
+    })
+    return <img src={LogoGrayData} alt={alt ?? 'Catena-X'} />
+  }
+
   useEffect(() => {
     setError(false)
     setLoad(false)
     setData(src)
   }, [src])
 
-  return (
+  return loader ? (
+    renderByLoader()
+  ) : (
     <img
       src={!load && !error && src.startsWith('blob:') ? src : data}
       alt={alt ?? 'Catena-X'}