Merge pull request #602 from Stackla/fix/add-onerror-event-for-avatar

feat: Enhance avatar image loading with lazy loading and error handling

Author: olivernosto

widgets/libs/vertical-expanded-tiles/tile-content.template.tsx

@@ -108,7 +108,21 @@ function UserInfoTemplate(props: UserInfoTemplateProps) {
   const tileAvatar = (
     <span class="avatar-wrapper">
       <a class="avatar-link" href={"javascript:void(0)"}>
-        <img loading="lazy" src={avatar} />
+        <img
+          loading="lazy"
+          src={avatar}
+          style={{ display: "none" }}
+          onLoad={e => {
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            const currentTarget: HTMLImageElement | null = e.currentTarget as HTMLImageElement
+            currentTarget.style.display = ""
+          }}
+          onError={e => {
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            const currentTarget: HTMLImageElement | null = e.currentTarget as HTMLImageElement
+            currentTarget.style.display = "none"
+          }}
+        />
       </a>
     </span>
   )