Merge pull request #88 from eclipse-tractusx/feat/CPLP-3190/render-wi…

…th-leader-when-specified

fix(image): render image with loader when specified

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

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

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'}