feat: add loading preview styles

Author: MartinCupela

src/v2/styles/LinkPreview/LinkPreview-layout.scss

@@ -46,4 +46,22 @@
     @include utils.button-reset;
     cursor: pointer;
   }
+}
+
+.str-chat__link-preview-card--loading {
+  .str-chat__link-preview-card__content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+
+    .str-chat__link-preview-card__content-title {
+      height: calc(var(--str-chat__spacing-px) * 16);
+      width: 100%
+    }
+
+    .str-chat__link-preview-card__content-description {
+      height: calc(var(--str-chat__spacing-px) * 12);
+      width: 100%;
+    }
+  }
 }

src/v2/styles/LinkPreview/LinkPreview-theme.scss

@@ -1,3 +1,9 @@
+@use '../utils';
+
+.str-chat {
+  --str-chat__link-preview-loading-state-color: var(--str-chat__disabled-color);
+}
+
 .str-chat__link-preview-card {
   .str-chat__link-preview-card__content {
     border-left: 2px solid var(--str-chat__primary-color);
@@ -14,4 +20,13 @@
   .str-chat__link-preview-card__dismiss-button svg path {
     fill: var(--str-chat__text-low-emphasis-color);
   }
+}
+
+.str-chat__link-preview-card--loading {
+  .str-chat__link-preview-card__content-title,
+  .str-chat__link-preview-card__content-description {
+    @include utils.loading-item-background('link-preview');
+    @include utils.loading-animation;
+    border-radius: calc(var(--str-chat__spacing-px) * 3);
+  }
 }