From 18adb5a0292e7107709f4b355b6dc0d948d7081a Mon Sep 17 00:00:00 2001
From: Martin Rohrmeier <martin.ra.rohrmeier@bmw.de>
Date: Fri, 15 Mar 2024 11:58:54 +0100
Subject: [PATCH] fix(image): use image loader first if specified

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 40762982..7c9608fa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.1.41
+
+- Use Image loader first if specified
+
 ## 2.1.40
 
 - Moved the docs from assets to the docs/storybook directory
diff --git a/package.json b/package.json
index 0985ebeb..e87e9cc6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "2.1.40",
+  "version": "2.1.41",
   "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 433ab295..1e5f8718 100644
--- a/src/components/basic/Image/index.tsx
+++ b/src/components/basic/Image/index.tsx
@@ -50,44 +50,35 @@ interface ImageProps {
 }
 
 export const Image = ({ src, alt, style, loader }: ImageProps): JSX.Element => {
-  const [data, setData] = useState(src)
-  const [load, setLoad] = useState(false)
+  const [data, setData] = useState(LogoGrayData)
   const [error, setError] = useState(false)
 
   const getData = useCallback(async () => {
     try {
-      const buffer =
-        loader != null ? await loader(src) : await defaultFetchImage(src)
+      const buffer = await (loader ? loader(src) : defaultFetchImage(src))
       const firstByte = buf2hex(buffer.slice(0, 1))
       const first3Bytes = buf2hex(buffer.slice(0, 3))
       const imageType =
         IMAGE_TYPES[firstByte] ?? IMAGE_TYPES[first3Bytes] ?? 'image/*'
       setData(URL.createObjectURL(new Blob([buffer], { type: imageType })))
     } catch (e) {
-      setError(true)
+      setData(LogoGrayData)
     }
   }, [src, loader])
 
   useEffect(() => {
-    setError(false)
-    setLoad(false)
-    setData(src)
-  }, [src])
+    getData().catch(
+      (e) => { console.error(e) }
+    )
+  }, [getData])
 
   return (
     <img
-      src={!load && !error && src.startsWith('blob:') ? src : data}
+      src={loader ?? error ? data : src}
       alt={alt ?? 'Catena-X'}
-      onError={() => {
+      onError={(e) => {
+        setError(true)
         setData(LogoGrayData)
-        if (load) {
-          setError(true)
-        } else {
-          setLoad(true)
-          getData().catch((e) => {
-            setError(true)
-          })
-        }
       }}
       style={{
         objectFit: 'cover',
@@ -95,4 +86,4 @@ export const Image = ({ src, alt, style, loader }: ImageProps): JSX.Element => {
       }}
     />
   )
-}
\ No newline at end of file
+}