[PM-1950] Add support for a loading state in dialogs (#5268)

libs/components/src/dialog/dialog/dialog.component.html

@@ -20,8 +20,23 @@
     ></button>
   </div>
 
-  <div class="tw-overflow-y-auto tw-pb-8" [ngClass]="{ 'tw-p-4': !disablePadding }">
-    <ng-content select="[bitDialogContent]"></ng-content>
+  <div class="tw-relative tw-flex tw-flex-col tw-overflow-hidden">
+    <div
+      *ngIf="loading"
+      class="tw-absolute tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center"
+    >
+      <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
+    </div>
+    <div
+      class="tw-pb-8"
+      [ngClass]="{
+        'tw-p-4': !disablePadding,
+        'tw-overflow-y-auto': !loading,
+        'tw-invisible tw-overflow-y-hidden': loading
+      }"
+    >
+      <ng-content select="[bitDialogContent]"></ng-content>
+    </div>
   </div>
 
   <div

libs/components/src/dialog/dialog/dialog.component.ts

@@ -9,9 +9,15 @@ import { fadeIn } from "../animations";
   animations: [fadeIn],
 })
 export class DialogComponent {
+  /**
+   * Dialog size, more complex dialogs should use large, otherwise default is fine.
+   */
   @Input() dialogSize: "small" | "default" | "large" = "default";
 
   private _disablePadding = false;
+  /**
+   * Disable the built-in padding on the dialog, for use with tabbed dialogs.
+   */
   @Input() set disablePadding(value: boolean | "") {
     this._disablePadding = coerceBooleanProperty(value);
   }
@@ -19,6 +25,11 @@ export class DialogComponent {
     return this._disablePadding;
   }
 
+  /**
+   * Mark the dialog as loading which replaces the content with a spinner.
+   */
+  @Input() loading = false;
+
   @HostBinding("class") get classes() {
     return ["tw-flex", "tw-flex-col", "tw-max-h-screen", "tw-w-screen", "tw-p-4"].concat(
       this.width

libs/components/src/dialog/dialog/dialog.stories.ts

@@ -32,6 +32,7 @@ export default {
     }),
   ],
   args: {
+    loading: false,
     dialogSize: "small",
   },
   argTypes: {
@@ -52,21 +53,22 @@ export default {
 const Template: Story<DialogComponent> = (args: DialogComponent) => ({
   props: args,
   template: `
-  <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
-    <span bitDialogTitle>{{title}}</span>
-    <span bitDialogContent>Dialog body text goes here.</span>
-    <ng-container bitDialogFooter>
-      <button bitButton buttonType="primary">Save</button>
-      <button bitButton buttonType="secondary">Cancel</button>
-      <button
-        class="tw-ml-auto"
-        bitIconButton="bwi-trash"
-        buttonType="danger"
-        size="default"
-        title="Delete"
-        aria-label="Delete"></button>
-    </ng-container>
-  </bit-dialog>
+    <bit-dialog [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
+      <span bitDialogTitle>{{title}}</span>
+      <ng-container bitDialogContent>Dialog body text goes here.</ng-container>
+      <ng-container bitDialogFooter>
+        <button bitButton buttonType="primary" [disabled]="loading">Save</button>
+        <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
+        <button
+          [disabled]="loading"
+          class="tw-ml-auto"
+          bitIconButton="bwi-trash"
+          buttonType="danger"
+          size="default"
+          title="Delete"
+          aria-label="Delete"></button>
+      </ng-container>
+    </bit-dialog>
   `,
 });
 
@@ -94,23 +96,30 @@ Large.args = {
   title: "Large",
 };
 
+export const Loading = Template.bind({});
+Loading.args = {
+  dialogSize: "large",
+  loading: true,
+  title: "Loading",
+};
+
 const TemplateScrolling: Story<DialogComponent> = (args: DialogComponent) => ({
   props: args,
   template: `
-  <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
-    <span bitDialogTitle>Scrolling Example</span>
-    <span bitDialogContent>
-      Dialog body text goes here.<br>
-      <ng-container *ngFor="let _ of [].constructor(100)">
-        repeating lines of characters <br>
+    <bit-dialog [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
+      <span bitDialogTitle>Scrolling Example</span>
+      <span bitDialogContent>
+        Dialog body text goes here.<br>
+        <ng-container *ngFor="let _ of [].constructor(100)">
+          repeating lines of characters <br>
+        </ng-container>
+        end of sequence!
+      </span>
+      <ng-container bitDialogFooter>
+        <button bitButton buttonType="primary" [disabled]="loading">Save</button>
+        <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
       </ng-container>
-      end of sequence!
-    </span>
-    <ng-container bitDialogFooter>
-      <button bitButton buttonType="primary">Save</button>
-      <button bitButton buttonType="secondary">Cancel</button>
-    </ng-container>
-  </bit-dialog>
+    </bit-dialog>
   `,
 });
 
@@ -122,20 +131,20 @@ ScrollingContent.args = {
 const TemplateTabbed: Story<DialogComponent> = (args: DialogComponent) => ({
   props: args,
   template: `
-  <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
-    <span bitDialogTitle>Tab Content Example</span>
-    <span bitDialogContent>
-      <bit-tab-group>
-          <bit-tab label="First Tab">First Tab Content</bit-tab>
-          <bit-tab label="Second Tab">Second Tab Content</bit-tab>
-          <bit-tab label="Third Tab">Third Tab Content</bit-tab>
-      </bit-tab-group>
-    </span>
-    <ng-container bitDialogFooter>
-      <button bitButton buttonType="primary">Save</button>
-      <button bitButton buttonType="secondary">Cancel</button>
-    </ng-container>
-  </bit-dialog>
+    <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
+      <span bitDialogTitle>Tab Content Example</span>
+      <span bitDialogContent>
+        <bit-tab-group>
+            <bit-tab label="First Tab">First Tab Content</bit-tab>
+            <bit-tab label="Second Tab">Second Tab Content</bit-tab>
+            <bit-tab label="Third Tab">Third Tab Content</bit-tab>
+        </bit-tab-group>
+      </span>
+      <ng-container bitDialogFooter>
+        <button bitButton buttonType="primary" [disabled]="loading">Save</button>
+        <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
+      </ng-container>
+    </bit-dialog>
   `,
 });