From 990f871905a5961317062967c7b56f6829ee5060 Mon Sep 17 00:00:00 2001
From: "christian.b.hoffmann" <christian.b.hoffmann@accenture.com>
Date: Sat, 23 Dec 2023 12:25:20 +0100
Subject: [PATCH] prevent icon jumps

---
 packages/ui-library/src/components/ui/icon/index.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/ui-library/src/components/ui/icon/index.ts b/packages/ui-library/src/components/ui/icon/index.ts
index 34282a25b..816c96ce8 100644
--- a/packages/ui-library/src/components/ui/icon/index.ts
+++ b/packages/ui-library/src/components/ui/icon/index.ts
@@ -23,6 +23,10 @@ export class BlrIcon extends LitElement {
   protected render() {
     const sizeKey = this.ignoreSize ? 'full' : this.size.toLowerCase();
 
+    const unfullfilledRenderResult = html`<span class="blr-icon ${sizeKey}">
+      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>
+    </span>`;
+
     if (IconMapping.hasOwnProperty(this.icon) && typeof IconMapping[this.icon] === 'function') {
       const importedIcon = IconMapping[this.icon]();
 
@@ -33,9 +37,9 @@ export class BlrIcon extends LitElement {
         // eslint-disable-next-line no-console
         .catch((err) => console.error(err.message));
 
-      return until(fullfilledRenderResult, nothing);
+      return until(fullfilledRenderResult, unfullfilledRenderResult);
     } else {
-      return nothing;
+      return unfullfilledRenderResult;
     }
   }
 }