bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-11 13:53:34 +00:00
Code Issues Releases Wiki Activity

pm-18441 add loading icon to member details (#13494)

Browse Source
This commit is contained in:
Vijay Oommen
2025-02-20 16:23:05 -06:00
committed by GitHub
parent 63927d6ba1
commit ef34b30cc1
2 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
bitwarden_license/bit-web/src/app/tools/reports/member-access-report/member-access-report.component.html
View File

@@ -5,7 +5,13 @@
class="tw-grow" class="tw-grow"
></bit-search> ></bit-search>
<button type="button" bitButton buttonType="primary" [bitAction]="exportReportAction"> <button
type="button"
bitButton
buttonType="primary"
[bitAction]="exportReportAction"
*ngIf="!(isLoading$ | async)"
>
<span>{{ "export" | i18n }}</span> <span>{{ "export" | i18n }}</span>
<i class="bwi bwi-fw bwi-sign-in" aria-hidden="true"></i> <i class="bwi bwi-fw bwi-sign-in" aria-hidden="true"></i>
</button> </button>
@@ -17,7 +23,18 @@
</p> </p>
</div> </div>
<bit-table [dataSource]="dataSource" class="tw-mt-2"> <ng-container *ngIf="isLoading$ | async">
<div class="tw-flex-col tw-flex tw-justify-center tw-items-center tw-gap-5 tw-mt-4">
<i
class="bwi bwi-2x bwi-spinner bwi-spin tw-text-primary-600"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
<h2 bitTypography="h1">{{ "loading" | i18n }}</h2>
</div>
</ng-container>
<bit-table *ngIf="!(isLoading$ | async)" [dataSource]="dataSource" class="tw-mt-2">
<ng-container header> <ng-container header>
<tr> <tr>
<th bitCell bitSortable="name" default>{{ "members" | i18n }}</th> <th bitCell bitSortable="name" default>{{ "members" | i18n }}</th>

7
bitwarden_license/bit-web/src/app/tools/reports/member-access-report/member-access-report.component.ts
View File

@@ -4,7 +4,7 @@ import { Component, OnInit } from "@angular/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop"; import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { FormControl } from "@angular/forms"; import { FormControl } from "@angular/forms";
import { ActivatedRoute } from "@angular/router"; import { ActivatedRoute } from "@angular/router";
import { debounceTime, firstValueFrom, lastValueFrom } from "rxjs"; import { BehaviorSubject, debounceTime, firstValueFrom, lastValueFrom } from "rxjs";
import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe"; import { UserNamePipe } from "@bitwarden/angular/pipes/user-name.pipe";
import { safeProvider } from "@bitwarden/angular/platform/utils/safe-provider"; import { safeProvider } from "@bitwarden/angular/platform/utils/safe-provider";
@@ -48,6 +48,7 @@ export class MemberAccessReportComponent implements OnInit {
protected searchControl = new FormControl("", { nonNullable: true }); protected searchControl = new FormControl("", { nonNullable: true });
protected organizationId: OrganizationId; protected organizationId: OrganizationId;
protected orgIsOnSecretsManagerStandalone: boolean; protected orgIsOnSecretsManagerStandalone: boolean;
protected isLoading$ = new BehaviorSubject(true);
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
@@ -64,6 +65,8 @@ export class MemberAccessReportComponent implements OnInit {
} }
async ngOnInit() { async ngOnInit() {
this.isLoading$.next(true);
const params = await firstValueFrom(this.route.params); const params = await firstValueFrom(this.route.params);
this.organizationId = params.organizationId; this.organizationId = params.organizationId;
@@ -74,6 +77,8 @@ export class MemberAccessReportComponent implements OnInit {
this.orgIsOnSecretsManagerStandalone = billingMetadata.isOnSecretsManagerStandalone; this.orgIsOnSecretsManagerStandalone = billingMetadata.isOnSecretsManagerStandalone;
await this.load(); await this.load();
this.isLoading$.next(false);
} }
async load() { async load() {