From 2ffe31d38701c60a048b849f323767c829587d4a Mon Sep 17 00:00:00 2001
From: Jordan Aasen <166539328+jaasen-livefront@users.noreply.github.com>
Date: Thu, 21 Nov 2024 09:50:51 -0800
Subject: [PATCH] [PM-15106] - add loading state to risk insights (#12078)

* add loading to risk insights

* uncomment code
---
 .../all-applications.component.html              |  7 +------
 .../all-applications.component.ts                | 12 +++++++++++-
 .../applications-loading.component.html          |  8 ++++++++
 .../applications-loading.component.ts            | 16 ++++++++++++++++
 .../critical-applications.component.html         |  7 +------
 .../critical-applications.component.ts           | 11 ++++++++++-
 apps/web/src/locales/en/messages.json            |  3 +++
 7 files changed, 50 insertions(+), 14 deletions(-)
 create mode 100644 apps/web/src/app/tools/access-intelligence/applications-loading.component.html
 create mode 100644 apps/web/src/app/tools/access-intelligence/applications-loading.component.ts

diff --git a/apps/web/src/app/tools/access-intelligence/all-applications.component.html b/apps/web/src/app/tools/access-intelligence/all-applications.component.html
index 730da309aad..ccdc84016c2 100644
--- a/apps/web/src/app/tools/access-intelligence/all-applications.component.html
+++ b/apps/web/src/app/tools/access-intelligence/all-applications.component.html
@@ -1,10 +1,5 @@
 <div *ngIf="loading">
-  <i
-    class="bwi bwi-spinner bwi-spin tw-text-muted"
-    title="{{ 'loading' | i18n }}"
-    aria-hidden="true"
-  ></i>
-  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+  <tools-applications-loading></tools-applications-loading>
 </div>
 <div class="tw-mt-4" *ngIf="!loading && !dataSource.data.length">
   <bit-no-items [icon]="noItemsIcon" class="tw-text-main">
diff --git a/apps/web/src/app/tools/access-intelligence/all-applications.component.ts b/apps/web/src/app/tools/access-intelligence/all-applications.component.ts
index 5cfa348ca3b..1fa4981c5c3 100644
--- a/apps/web/src/app/tools/access-intelligence/all-applications.component.ts
+++ b/apps/web/src/app/tools/access-intelligence/all-applications.component.ts
@@ -32,11 +32,21 @@ import { HeaderModule } from "../../layouts/header/header.module";
 import { SharedModule } from "../../shared";
 import { PipesModule } from "../../vault/individual-vault/pipes/pipes.module";
 
+import { ApplicationsLoadingComponent } from "./applications-loading.component";
+
 @Component({
   standalone: true,
   selector: "tools-all-applications",
   templateUrl: "./all-applications.component.html",
-  imports: [HeaderModule, CardComponent, SearchModule, PipesModule, NoItemsModule, SharedModule],
+  imports: [
+    ApplicationsLoadingComponent,
+    HeaderModule,
+    CardComponent,
+    SearchModule,
+    PipesModule,
+    NoItemsModule,
+    SharedModule,
+  ],
   providers: [MemberCipherDetailsApiService],
 })
 export class AllApplicationsComponent implements OnInit {
diff --git a/apps/web/src/app/tools/access-intelligence/applications-loading.component.html b/apps/web/src/app/tools/access-intelligence/applications-loading.component.html
new file mode 100644
index 00000000000..365f32c34d4
--- /dev/null
+++ b/apps/web/src/app/tools/access-intelligence/applications-loading.component.html
@@ -0,0 +1,8 @@
+<div class="tw-flex-col tw-flex tw-justify-center tw-items-center tw-gap-3 tw-mt-2">
+  <i
+    class="bwi bwi-lg bwi-spinner bwi-spin text-primary"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
+  <h2 bitTypography="h4">{{ "generatingRiskInsights" | i18n }}</h2>
+</div>
diff --git a/apps/web/src/app/tools/access-intelligence/applications-loading.component.ts b/apps/web/src/app/tools/access-intelligence/applications-loading.component.ts
new file mode 100644
index 00000000000..ca15ea0ae91
--- /dev/null
+++ b/apps/web/src/app/tools/access-intelligence/applications-loading.component.ts
@@ -0,0 +1,16 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+
+import { SharedModule } from "../../shared";
+
+@Component({
+  selector: "tools-applications-loading",
+  standalone: true,
+  imports: [CommonModule, JslibModule, SharedModule],
+  templateUrl: "./applications-loading.component.html",
+})
+export class ApplicationsLoadingComponent {
+  constructor() {}
+}
diff --git a/apps/web/src/app/tools/access-intelligence/critical-applications.component.html b/apps/web/src/app/tools/access-intelligence/critical-applications.component.html
index 1c503f3d786..d69bb0f7cec 100644
--- a/apps/web/src/app/tools/access-intelligence/critical-applications.component.html
+++ b/apps/web/src/app/tools/access-intelligence/critical-applications.component.html
@@ -1,10 +1,5 @@
 <div *ngIf="loading">
-  <i
-    class="bwi bwi-spinner bwi-spin tw-text-muted"
-    title="{{ 'loading' | i18n }}"
-    aria-hidden="true"
-  ></i>
-  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+  <tools-applications-loading></tools-applications-loading>
 </div>
 <div class="tw-mt-4" *ngIf="!dataSource.data.length">
   <bit-no-items [icon]="noItemsIcon" class="tw-text-main">
diff --git a/apps/web/src/app/tools/access-intelligence/critical-applications.component.ts b/apps/web/src/app/tools/access-intelligence/critical-applications.component.ts
index 0779b2977e5..d621a962ff3 100644
--- a/apps/web/src/app/tools/access-intelligence/critical-applications.component.ts
+++ b/apps/web/src/app/tools/access-intelligence/critical-applications.component.ts
@@ -13,13 +13,22 @@ import { SharedModule } from "../../shared";
 import { PipesModule } from "../../vault/individual-vault/pipes/pipes.module";
 
 import { applicationTableMockData } from "./application-table.mock";
+import { ApplicationsLoadingComponent } from "./applications-loading.component";
 import { RiskInsightsTabType } from "./risk-insights.component";
 
 @Component({
   standalone: true,
   selector: "tools-critical-applications",
   templateUrl: "./critical-applications.component.html",
-  imports: [CardComponent, HeaderModule, SearchModule, NoItemsModule, PipesModule, SharedModule],
+  imports: [
+    ApplicationsLoadingComponent,
+    CardComponent,
+    HeaderModule,
+    SearchModule,
+    NoItemsModule,
+    PipesModule,
+    SharedModule,
+  ],
 })
 export class CriticalApplicationsComponent implements OnInit {
   protected dataSource = new TableDataSource<any>();
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index cb0456bc039..8784a1bb57a 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -17,6 +17,9 @@
   "reviewAtRiskPasswords": {
     "message": "Review at-risk passwords (weak, exposed, or reused) across applications. Select your most critical applications to prioritize security actions for your users to address at-risk passwords."
   },
+  "generatingRiskInsights": {
+    "message": "Generating your risk insights..."
+  },
   "dataLastUpdated": {
     "message": "Data last updated: $DATE$",
     "placeholders": {