From a53a92d81346c2aaa950b26edf30c2b4a88e72e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kopoci=C5=84ski?= <pawel@kopocinski.pl>
Date: Tue, 30 Jan 2024 13:26:21 +0100
Subject: [PATCH] feat(cxl-ui): cxl-base-card add lazyload for avatar image

---
 packages/cxl-ui/src/components/cxl-base-card.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/cxl-ui/src/components/cxl-base-card.js b/packages/cxl-ui/src/components/cxl-base-card.js
index cdd50d10b..fe63ddd31 100644
--- a/packages/cxl-ui/src/components/cxl-base-card.js
+++ b/packages/cxl-ui/src/components/cxl-base-card.js
@@ -36,6 +36,8 @@ export class CXLBaseCardElement extends LitElement {
 
   @property({ type: Boolean, reflect: true, attribute: 'show-time-icon' }) showTimeIcon = false;
 
+  @property({ type: Boolean }) lazyload = true;
+
   _slotHasChildren(e) {
     const slot = e.target;
     const { name } = slot;
@@ -76,7 +78,7 @@ export class CXLBaseCardElement extends LitElement {
   }
 
   _renderAvatar() {
-    return html`<img src=${this.avatar} alt="${this.instructor}" />`;
+    return html`<img src=${this.avatar} alt="${this.instructor}" loading="${this.lazyload ? 'lazy' : nothing}" />`;
   }
 
   /**