fix(image): use image loader first if specified

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

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",

src/components/basic/Image/index.tsx

@@ -50,49 +50,40 @@ 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',
         ...style,
       }}
     />
   )
-}
+}