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

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

@@ -20,9 +20,24 @@
     ></button>
   </div>
 
-  <div class="tw-overflow-y-auto tw-pb-8" [ngClass]="{ 'tw-p-4': !disablePadding }">
+  <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
     class="tw-flex tw-flex-row tw-items-center tw-gap-2 tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-bg-background-alt tw-p-4"

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,13 +53,14 @@ export default {
 const Template: Story<DialogComponent> = (args: DialogComponent) => ({
   props: args,
   template: `
-  <bit-dialog [dialogSize]="dialogSize" [disablePadding]="disablePadding">
+    <bit-dialog [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
       <span bitDialogTitle>{{title}}</span>
-    <span bitDialogContent>Dialog body text goes here.</span>
+      <ng-container bitDialogContent>Dialog body text goes here.</ng-container>
       <ng-container bitDialogFooter>
-      <button bitButton buttonType="primary">Save</button>
-      <button bitButton buttonType="secondary">Cancel</button>
+        <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"
@@ -94,10 +96,17 @@ 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">
+    <bit-dialog [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
       <span bitDialogTitle>Scrolling Example</span>
       <span bitDialogContent>
         Dialog body text goes here.<br>
@@ -107,8 +116,8 @@ const TemplateScrolling: Story<DialogComponent> = (args: DialogComponent) => ({
         end of sequence!
       </span>
       <ng-container bitDialogFooter>
-      <button bitButton buttonType="primary">Save</button>
-      <button bitButton buttonType="secondary">Cancel</button>
+        <button bitButton buttonType="primary" [disabled]="loading">Save</button>
+        <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
       </ng-container>
     </bit-dialog>
   `,
@@ -132,8 +141,8 @@ const TemplateTabbed: Story<DialogComponent> = (args: DialogComponent) => ({
         </bit-tab-group>
       </span>
       <ng-container bitDialogFooter>
-      <button bitButton buttonType="primary">Save</button>
-      <button bitButton buttonType="secondary">Cancel</button>
+        <button bitButton buttonType="primary" [disabled]="loading">Save</button>
+        <button bitButton buttonType="secondary" [disabled]="loading">Cancel</button>
       </ng-container>
     </bit-dialog>
   `,