From df8f1208c60689f70322395d314f28cbfa99bd11 Mon Sep 17 00:00:00 2001
From: Jacek Pluta <jacek.pluta@hyland.com>
Date: Wed, 17 Jul 2024 08:33:56 +0200
Subject: [PATCH] [ACS-8382] Blurring the AI answer section before getting
 response from backend

---
 .../search-ai-results.component.html          | 26 +++++-
 .../search-ai-results.component.scss          | 80 ++++++++++++++++++-
 2 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.html b/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.html
index c6e2327ff..b5983f403 100644
--- a/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.html
+++ b/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.html
@@ -38,7 +38,7 @@
           </mat-card>
         </div>
         <mat-divider class="aca-search-ai-response-container-body-divider"></mat-divider>
-        <ng-container *ngIf="!loading">
+        <ng-container *ngIf="!loading else skeleton">
           <div
             class="aca-search-ai-response-container-body"
             *ngIf="!hasAnsweringError">
@@ -125,3 +125,27 @@
     *ngIf="hasError">
   </adf-empty-content>
 </aca-page-layout>
+
+<ng-template #skeleton>
+  <div class="adf-skeleton-container">
+    <div class="adf-skeleton adf-skeleton-text"></div>
+    <div class="adf-skeleton adf-skeleton-text"></div>
+    <div class="adf-skeleton adf-skeleton-text adf-skeleton-text-half"></div>
+
+    <mat-divider class="aca-search-ai-response-container-body-divider"></mat-divider>
+    <p class="aca-search-ai-response-container-body-references-container-header adf-skeleton-references-container-header">
+      {{ 'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.REFERENCED_DOCUMENTS_HEADER' | translate }}
+    </p>
+
+    <div class="adf-skeleton-header-container">
+      <div class="adf-skeleton-header-container-element">
+        <div class="adf-skeleton adf-skeleton-image"></div>
+        <div class="adf-skeleton adf-skeleton-text adf-skeleton-text-title"></div>
+      </div>
+      <div class="adf-skeleton-header-container-element">
+        <div class="adf-skeleton adf-skeleton-image"></div>
+        <div class="adf-skeleton adf-skeleton-text adf-skeleton-text-title"></div>
+      </div>
+    </div>
+  </div>
+</ng-template>
diff --git a/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.scss b/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.scss
index 0857c2a16..af481d00b 100644
--- a/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.scss
+++ b/projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.scss
@@ -1,3 +1,7 @@
+$light-grey1: #d5d5d5;
+$light-grey2: #d9d9d9;
+$light-grey3: #dedede;
+
 .aca-search-ai-results {
   aca-page-layout {
     .aca-page-layout-content {
@@ -34,6 +38,80 @@
         margin: 16px 0 75px;
         padding: 14px 40px 36px 35px;
 
+        .adf-skeleton {
+          position: relative;
+          background-image: linear-gradient(to left, $light-grey1 0%, $light-grey2 20%, $light-grey3 40%, $light-grey1 100%);
+          background-size: 200%;
+          display: inline-block;
+          height: 1em;
+          overflow: hidden;
+
+          &::after {
+            position: absolute;
+            inset: 0;
+            transform: translateX(-100%);
+            background-image: linear-gradient(90deg, rgba(white, 0) 0, rgba(white, 0.2) 20%, rgba(white, 0.5) 60%, rgba(white, 0));
+            animation: shimmer 2s infinite;
+            content: '';
+          }
+
+          @keyframes shimmer {
+            100% {
+              transform: translateX(100%);
+            }
+          }
+        }
+
+        .adf-skeleton-container {
+          margin-top: 16px;
+
+          .adf-skeleton-text {
+            width: 90%;
+            height: 1rem;
+            margin-bottom: 0.5rem;
+            border-radius: 0.25rem;
+            margin-left: 6px;
+
+            &-title {
+              width: 75px;
+            }
+
+            &-half {
+              width: 50%;
+              margin-bottom: 8px;
+            }
+          }
+
+          .adf-skeleton-references-container-header {
+            padding-left: 8px;
+          }
+
+          .adf-skeleton-header-container {
+            padding-left: 6px;
+            margin-top: 16px;
+            margin-bottom: 12px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+
+            &-element {
+              display: flex;
+              align-items: center;
+              margin-right: 16px;
+
+              .adf-skeleton-text {
+                margin-bottom: 0;
+              }
+            }
+          }
+
+          .adf-skeleton-image {
+            height: 16px;
+            width: 16px;
+            border-radius: 0.25rem;
+          }
+        }
+
         &-error {
           border-color: var(--adf-error-color);
           padding: 21px 19px 27px 18px;
@@ -166,7 +244,7 @@
             padding-left: 8px;
 
             &-header {
-              margin-top: 16px;
+              margin-top: 24px;
               color: var(--theme-text-light-color);
               font-weight: 400;
               margin-bottom: 3px;