[SM-470] fix SM edit secret spinner (#4958)

bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html

@@ -1,38 +1,39 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit">
   <bit-dialog dialogSize="default">
     <ng-container bitDialogTitle>{{ title | i18n }}</ng-container>
-    <div bitDialogContent>
+    <div bitDialogContent class="tw-relative">
-      <div *ngIf="loading" class="tw-text-center">
+      <div
+        *ngIf="showSpinner"
+        class="tw-absolute tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-bg-background-alt"
+      >
         <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
       </div>
-      <ng-container *ngIf="!loading">
+      <div class="tw-flex tw-gap-4 tw-pt-4">
-        <div class="tw-flex tw-gap-4 tw-pt-4">
+        <bit-form-field class="tw-w-1/3">
-          <bit-form-field class="tw-w-1/3">
+          <bit-label for="secret-name">{{ "name" | i18n }}</bit-label>
-            <bit-label for="secret-name">{{ "name" | i18n }}</bit-label>
+          <input formControlName="name" bitInput />
-            <input formControlName="name" bitInput />
-          </bit-form-field>
-          <bit-form-field class="tw-w-full">
-            <bit-label>{{ "value" | i18n }}</bit-label>
-            <textarea bitInput rows="4" formControlName="value"></textarea>
-          </bit-form-field>
-        </div>
-        <bit-form-field>
-          <bit-label>{{ "notes" | i18n }}</bit-label>
-          <textarea bitInput rows="4" formControlName="notes"></textarea>
         </bit-form-field>
-
+        <bit-form-field class="tw-w-full">
-        <hr />
+          <bit-label>{{ "value" | i18n }}</bit-label>
-
+          <textarea bitInput rows="4" formControlName="value"></textarea>
-        <bit-form-field class="tw-mt-3 tw-mb-0">
-          <bit-label>{{ "project" | i18n }}</bit-label>
-          <select bitInput name="project" formControlName="project">
-            <option value="">{{ "selectPlaceholder" | i18n }}</option>
-            <option *ngFor="let f of projects" [value]="f.id">
-              {{ f.name }}
-            </option>
-          </select>
         </bit-form-field>
-      </ng-container>
+      </div>
+      <bit-form-field>
+        <bit-label>{{ "notes" | i18n }}</bit-label>
+        <textarea bitInput rows="4" formControlName="notes"></textarea>
+      </bit-form-field>
+
+      <hr />
+
+      <bit-form-field class="tw-mt-3 tw-mb-0">
+        <bit-label>{{ "project" | i18n }}</bit-label>
+        <select bitInput name="project" formControlName="project">
+          <option value="">{{ "selectPlaceholder" | i18n }}</option>
+          <option *ngFor="let f of projects" [value]="f.id">
+            {{ f.name }}
+          </option>
+        </select>
+      </bit-form-field>
     </div>
     <div bitDialogFooter class="tw-flex tw-gap-2">
       <button type="submit" bitButton buttonType="primary" bitFormButton>

bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.ts

@@ -40,7 +40,7 @@ export class SecretDialogComponent implements OnInit {
     project: new FormControl("", [Validators.required]),
   });
 
-  protected loading = false;
+  private loading = true;
   projects: ProjectListView[];
 
   private destroy$ = new Subject<void>();
@@ -55,10 +55,6 @@ export class SecretDialogComponent implements OnInit {
   ) {}
 
   async ngOnInit() {
-    this.projects = await this.projectService
-      .getProjects(this.data.organizationId)
-      .then((projects) => projects.sort((a, b) => a.name.localeCompare(b.name)));
-
     if (this.data.operation === OperationType.Edit && this.data.secretId) {
       await this.loadData();
     } else if (this.data.operation !== OperationType.Add) {
@@ -69,10 +65,14 @@ export class SecretDialogComponent implements OnInit {
     if (this.data.projectId) {
       this.formGroup.get("project").setValue(this.data.projectId);
     }
+
+    this.projects = await this.projectService
+      .getProjects(this.data.organizationId)
+      .then((projects) => projects.sort((a, b) => a.name.localeCompare(b.name)));
   }
 
   async loadData() {
-    this.loading = true;
+    this.formGroup.disable();
     const secret: SecretView = await this.secretService.getBySecretId(this.data.secretId);
     this.formGroup.setValue({
       name: secret.name,
@@ -81,6 +81,7 @@ export class SecretDialogComponent implements OnInit {
       project: secret.projects[0]?.id ?? "",
     });
     this.loading = false;
+    this.formGroup.enable();
   }
 
   ngOnDestroy(): void {
@@ -92,6 +93,10 @@ export class SecretDialogComponent implements OnInit {
     return this.data.operation === OperationType.Add ? "newSecret" : "editSecret";
   }
 
+  get showSpinner() {
+    return this.data.operation === OperationType.Edit && this.loading;
+  }
+
   submit = async () => {
     this.formGroup.markAllAsTouched();