Bug 1954812 - show animated skeleton of 3 points replaced by generated content - r=Mardak,firefox-ai-ml-reviewers,ngrato

- use tab-group-suggestions loading animation color
- set progressPercentage to init to 0

Differential Revision: https://phabricator.services.mozilla.com/D243322

browser/components/genai/content/link-preview-card.css

@@ -57,20 +57,78 @@
         margin: 0;
     }
 
-    > ul {
+  > ul {
-        font-size: var(--og-main-font-size);
+      font-size: var(--og-main-font-size);
-        padding-inline-start: var(--space-large);
+      line-height: 1.15;  /* Design requires 18px line-height */
-    }
+      list-style-type: square;
+      padding-inline-start: var(--space-large);
+  }
 
-    li {
+  li {
-        margin-block: var(--space-medium);
+      margin-block: var(--space-medium);
+      padding-inline-start: 5px;
+      &::marker {
+        color: var(--border-color-deemphasized);
     }
+  }
 
-    > hr {
+  > hr {
-        border-color: var(--border-color-card);
+      border-color: var(--border-color-card);
-    }
+  }
 
     > p {
         margin-block: var(--space-medium) 0;
     }
 }
+
+/**
+ * Defines the animation for the loading state of link preview keypoints
+ * Creates a smooth gradient animation that moves from right to left
+ * to indicate content is being loaded
+ */
+@keyframes link-preview-keypoints-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.keypoints-list {
+  .content-item {
+    margin-bottom: var(--space-xlarge);
+    width: 100%;
+
+    &.loading {
+      div {
+        --skeleton-loader-background-color: var(--tab-group-suggestions-loading-animation-color-1);
+        --skeleton-loader-motion-element-color: var(--tab-group-suggestions-loading-animation-color-2);
+        animation: link-preview-keypoints-loading 3s infinite;
+        background: linear-gradient(
+          100deg,
+          var(--skeleton-loader-background-color) 30%,
+          var(--skeleton-loader-motion-element-color) 50%,
+          var(--skeleton-loader-background-color) 70%
+        );
+        background-size: 200% 100%;
+        border-radius: 5px;
+        height: var(--og-main-font-size);
+        margin-bottom: 4px;
+        width: 100%;
+      }
+
+      div:nth-of-type(1) {
+        max-width: 95%;
+      }
+
+      div:nth-of-type(2) {
+        max-width: 98%;
+      }
+
+      div:nth-of-type(3) {
+        max-width: 90%;
+      }
+    }
+  }
+}

browser/components/genai/content/link-preview-card.mjs

@@ -26,6 +26,9 @@ class LinkPreviewCard extends MozLitElement {
   // Text for the link to visit the original URL when in error state
   static VISIT_LINK_TEXT = "Visit link";
 
+  // Number of placeholder rows to show when loading
+  static PLACEHOLDER_COUNT = 3;
+
   static properties = {
     generating: { type: Number }, // 0 = off, 1-4 = generating & dots state
     keyPoints: { type: Array },
@@ -160,13 +163,35 @@ class LinkPreviewCard extends MozLitElement {
         ${this.generating || this.keyPoints.length
           ? html`
               <div class="ai-content">
-                <h3>
+                <h3>Key points</h3>
-                  ${this.generating
+                <ul class="keypoints-list">
-                    ? "Generating key points" + ".".repeat(this.generating - 1)
+                  ${
-                    : "Key points"}
+                    /* All populated content items */
-                </h3>
+                    this.keyPoints.map(
-                <ul>
+                      item => html`<li class="content-item">${item}</li>`
-                  ${this.keyPoints.map(item => html`<li>${item}</li>`)}
+                    )
+                  }
+                  ${
+                    /* Loading placeholders with three divs each */
+                    this.generating
+                      ? Array(
+                          Math.max(
+                            0,
+                            LinkPreviewCard.PLACEHOLDER_COUNT -
+                              this.keyPoints.length
+                          )
+                        )
+                          .fill()
+                          .map(
+                            () =>
+                              html` <li class="content-item loading">
+                                <div></div>
+                                <div></div>
+                                <div></div>
+                              </li>`
+                          )
+                      : []
+                  }
                 </ul>
                 ${this.progress >= 0
                   ? html`