[PM-15106] - add loading state to risk insights (#12078)

* add loading to risk insights

* uncomment code

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">

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 {

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>

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() {}
+}

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">

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>();

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": {