feat,ux,draft: papers + loading indicators per product type

Author: shiftmed

angular/src/app/home/home.component.ts

@@ -757,7 +757,9 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
     const filter = current.filter ?? feed.filter ?? "@type=Dataset";
 
     const sub = this.searchService
-      .searchPhrase(query, "", undefined, 1, pageSize, sortOrder, filter)
+      .searchPhrase(query, "", undefined, 1, pageSize, sortOrder, filter, {
+        forceData: true,
+      })
       .subscribe({
         next: (response) => {
           const items = response?.ResultData || [];

angular/src/app/search-panel/search-panel.component.html

@@ -157,6 +157,22 @@ <h3 *ngIf="title" class="heading title has-text-black">{{ title }}</h3>
         >
           <i class="pi pi-info-circle"></i>
         </span>
+
+        <div
+          class="search-progress"
+          [class.search-progress--visible]="globalProgressVisible"
+          [class.search-progress--error]="hasProgressFailures()"
+          role="progressbar"
+          aria-label="Search progress"
+          aria-valuemin="0"
+          aria-valuemax="100"
+          [attr.aria-valuenow]="globalProgress"
+        >
+          <div
+            class="search-progress__fill"
+            [style.width.%]="globalProgress"
+          ></div>
+        </div>
       </div>
 
       <div
@@ -177,11 +193,33 @@ <h3 *ngIf="title" class="heading title has-text-black">{{ title }}</h3>
             class="product-type-chip"
             *ngFor="let product of visibleProductTypes"
             [class.product-type-chip--active]="isProductTypeActive(product.key)"
+            [class.product-type-chip--error]="
+              shouldShowProductProgress(product.key) &&
+              getProductProgressStatus(product.key) === 'error'
+            "
             (click)="onProductTypeToggle(product)"
             [attr.aria-pressed]="isProductTypeActive(product.key)"
           >
-            <i [ngClass]="product.icon" aria-hidden="true"></i>
-            <span class="product-type-chip__label">{{ product.label }}</span>
+            <span class="product-type-chip__main">
+              <i [ngClass]="product.icon" aria-hidden="true"></i>
+              <span class="product-type-chip__label">{{ product.label }}</span>
+            </span>
+            <span
+              class="product-type-chip__progress"
+              [class.product-type-chip__progress--visible]="
+                shouldShowProductProgress(product.key)
+              "
+            >
+              <span class="product-type-chip__progress-track">
+                <span
+                  class="product-type-chip__progress-fill"
+                  [class.product-type-chip__progress-fill--error]="
+                    getProductProgressStatus(product.key) === 'error'
+                  "
+                  [style.width.%]="getProductProgress(product.key)"
+                ></span>
+              </span>
+            </span>
           </button>
         </div>
       </div>
@@ -277,7 +315,7 @@ <h3 *ngIf="title" class="heading title has-text-black">{{ title }}</h3>
   >
     <div class="external-info">
       <p class="external-info__lead">
-        Include open-source projects and patents alongside NIST resources. Filters and counts will blend them into your results.
+        Include open-source projects, patents, and scholarly papers alongside NIST resources. Filters and counts will blend them into your results.
       </p>
       <div class="external-info__pills">
         <span class="external-pill">
@@ -290,7 +328,7 @@ <h3 *ngIf="title" class="heading title has-text-black">{{ title }}</h3>
         </span>
         <span class="external-pill">
           <i class="pi pi-file"></i>
-          Scholarly papers (soon)
+          Scholarly papers
         </span>
         <span class="external-pill">
           <i class="pi pi-filter"></i>

angular/src/app/search-panel/search-panel.component.scss

@@ -246,7 +246,7 @@ body .p-highlight {
 .search-input-group {
   width: min(1320px, 96vw);
   margin: 2rem auto 0;
-  padding: 0.25rem 0.4rem;
+  padding: 0.35rem 0.4rem;
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.22);
   background: rgba(0, 0, 0, 0.25);
@@ -257,6 +257,11 @@ body .p-highlight {
   z-index: 2;
 }
 
+.search-input-group > :not(.search-progress) {
+  position: relative;
+  z-index: 1;
+}
+
 .search-input-group--external-on {
   border-color: rgba(74, 163, 255, 0.85);
   box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28),
@@ -295,12 +300,23 @@ body .p-highlight {
   background: rgba(255, 255, 255, 0.06);
   color: #ffffff;
   border-radius: 999px;
-  padding: 0.35rem 0.9rem;
+  padding: 0.4rem 0.95rem;
   font-weight: 700;
   font-size: 0.9rem;
   letter-spacing: 0.01em;
   backdrop-filter: blur(4px);
   transition: all 0.18s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.product-type-chip__main {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  position: relative;
+  z-index: 1;
 }
 
 .product-type-chip i {
@@ -335,10 +351,88 @@ body .p-highlight {
   opacity: 1;
 }
 
+.product-type-chip--error {
+  border-color: rgba(248, 113, 113, 0.95);
+  box-shadow: 0 12px 28px rgba(248, 113, 113, 0.28);
+}
+
 .product-type-chip__label {
   white-space: nowrap;
 }
 
+.product-type-chip__progress {
+  position: absolute;
+  inset: 2px;
+  border-radius: 999px;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity 420ms ease;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.product-type-chip__progress--visible {
+  opacity: 0.22;
+}
+
+.product-type-chip__progress-track {
+  width: 100%;
+  height: 100%;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  overflow: hidden;
+  display: block;
+}
+
+.product-type-chip--active .product-type-chip__progress-track {
+  background: rgba(15, 23, 42, 0.08);
+}
+
+.product-type-chip__progress-fill {
+  display: block;
+  height: 100%;
+  width: 0;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #38bdf8, #60a5fa);
+  box-shadow: 0 0 12px rgba(96, 165, 250, 0.45);
+  transition: width 320ms ease;
+}
+
+.product-type-chip__progress-fill--error {
+  background: linear-gradient(90deg, #f97316, #ef4444);
+  box-shadow: 0 0 10px rgba(239, 68, 68, 0.55);
+}
+
+.search-progress {
+  position: absolute;
+  inset: 4px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.06);
+  overflow: hidden;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 480ms ease;
+  z-index: 0;
+}
+
+.search-progress--visible {
+  opacity: 0.22;
+}
+
+.search-progress__fill {
+  height: 100%;
+  width: 0;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #22d3ee, #3b82f6);
+  box-shadow: 0 0 18px rgba(59, 130, 246, 0.4);
+  transition: width 360ms ease;
+}
+
+.search-progress--error .search-progress__fill {
+  background: linear-gradient(90deg, #fb7185, #ef4444);
+  box-shadow: 0 0 16px rgba(239, 68, 68, 0.45);
+}
+
 /* Toast styling */
 :host ::ng-deep .product-toast.p-toast {
   width: auto;