[CL-485] Add small delay for async action loading state (#12835)

libs/components/src/icon-button/icon-button.component.ts

@@ -1,7 +1,9 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
 import { NgClass } from "@angular/common";
-import { Component, ElementRef, HostBinding, Input } from "@angular/core";
+import { Component, computed, ElementRef, HostBinding, Input, model } from "@angular/core";
+import { toObservable, toSignal } from "@angular/core/rxjs-interop";
+import { debounce, interval } from "rxjs";
 
 import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
 import { FocusableElement } from "../shared/focusable-element";
@@ -34,9 +36,6 @@ const styles: Record<IconButtonType, string[]> = {
     "hover:tw-bg-transparent-hover",
     "hover:tw-border-text-contrast",
     "focus-visible:before:tw-ring-text-contrast",
-    "disabled:tw-opacity-60",
-    "disabled:hover:tw-border-transparent",
-    "disabled:hover:tw-bg-transparent",
     ...focusRing,
   ],
   main: [
@@ -46,9 +45,6 @@ const styles: Record<IconButtonType, string[]> = {
     "hover:tw-bg-transparent-hover",
     "hover:tw-border-primary-600",
     "focus-visible:before:tw-ring-primary-600",
-    "disabled:!tw-text-secondary-300",
-    "disabled:hover:tw-border-transparent",
-    "disabled:hover:tw-bg-transparent",
     ...focusRing,
   ],
   muted: [
@@ -60,11 +56,8 @@ const styles: Record<IconButtonType, string[]> = {
     "hover:tw-bg-transparent-hover",
     "hover:tw-border-primary-600",
     "focus-visible:before:tw-ring-primary-600",
-    "disabled:!tw-text-secondary-300",
     "aria-expanded:hover:tw-bg-secondary-700",
     "aria-expanded:hover:tw-border-secondary-700",
-    "disabled:hover:tw-border-transparent",
-    "disabled:hover:tw-bg-transparent",
     ...focusRing,
   ],
   primary: [
@@ -74,9 +67,6 @@ const styles: Record<IconButtonType, string[]> = {
     "hover:tw-bg-primary-600",
     "hover:tw-border-primary-600",
     "focus-visible:before:tw-ring-primary-600",
-    "disabled:tw-opacity-60",
-    "disabled:hover:tw-border-primary-600",
-    "disabled:hover:tw-bg-primary-600",
     ...focusRing,
   ],
   secondary: [
@@ -86,10 +76,6 @@ const styles: Record<IconButtonType, string[]> = {
     "hover:!tw-text-contrast",
     "hover:tw-bg-text-muted",
     "focus-visible:before:tw-ring-primary-600",
-    "disabled:tw-opacity-60",
-    "disabled:hover:tw-border-text-muted",
-    "disabled:hover:tw-bg-transparent",
-    "disabled:hover:!tw-text-muted",
     ...focusRing,
   ],
   danger: [
@@ -100,10 +86,6 @@ const styles: Record<IconButtonType, string[]> = {
     "hover:tw-bg-transparent",
     "hover:tw-border-primary-600",
     "focus-visible:before:tw-ring-primary-600",
-    "disabled:!tw-text-secondary-300",
-    "disabled:hover:tw-border-transparent",
-    "disabled:hover:tw-bg-transparent",
-    "disabled:hover:!tw-text-secondary-300",
     ...focusRing,
   ],
   light: [
@@ -113,10 +95,48 @@ const styles: Record<IconButtonType, string[]> = {
     "hover:tw-bg-transparent-hover",
     "hover:tw-border-text-alt2",
     "focus-visible:before:tw-ring-text-alt2",
+    ...focusRing,
+  ],
+  unstyled: [],
+};
+
+const disabledStyles: Record<IconButtonType, string[]> = {
+  contrast: [
+    "disabled:tw-opacity-60",
+    "disabled:hover:tw-border-transparent",
+    "disabled:hover:tw-bg-transparent",
+  ],
+  main: [
+    "disabled:!tw-text-secondary-300",
+    "disabled:hover:tw-border-transparent",
+    "disabled:hover:tw-bg-transparent",
+  ],
+  muted: [
+    "disabled:!tw-text-secondary-300",
+    "disabled:hover:tw-border-transparent",
+    "disabled:hover:tw-bg-transparent",
+  ],
+  primary: [
+    "disabled:tw-opacity-60",
+    "disabled:hover:tw-border-primary-600",
+    "disabled:hover:tw-bg-primary-600",
+  ],
+  secondary: [
+    "disabled:tw-opacity-60",
+    "disabled:hover:tw-border-text-muted",
+    "disabled:hover:tw-bg-transparent",
+    "disabled:hover:!tw-text-muted",
+  ],
+  danger: [
+    "disabled:!tw-text-secondary-300",
+    "disabled:hover:tw-border-transparent",
+    "disabled:hover:tw-bg-transparent",
+    "disabled:hover:!tw-text-secondary-300",
+  ],
+  light: [
     "disabled:tw-opacity-60",
     "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
-    ...focusRing,
   ],
   unstyled: [],
 };
@@ -137,11 +157,14 @@ const sizes: Record<IconButtonSize, string[]> = {
   ],
   standalone: true,
   imports: [NgClass],
+  host: {
+    "[attr.disabled]": "disabledAttr()",
+  },
 })
 export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableElement {
   @Input("bitIconButton") icon: string;
 
-  @Input() buttonType: IconButtonType;
+  @Input() buttonType: IconButtonType = "main";
 
   @Input() size: IconButtonSize = "default";
 
@@ -155,22 +178,51 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
       "hover:tw-no-underline",
       "focus:tw-outline-none",
     ]
-      .concat(styles[this.buttonType ?? "main"])
-      .concat(sizes[this.size]);
+      .concat(styles[this.buttonType])
+      .concat(sizes[this.size])
+      .concat(this.showDisabledStyles() || this.disabled() ? disabledStyles[this.buttonType] : []);
   }
 
   get iconClass() {
     return [this.icon, "!tw-m-0"];
   }
 
-  @HostBinding("attr.disabled")
-  get disabledAttr() {
-    const disabled = this.disabled != null && this.disabled !== false;
-    return disabled || this.loading ? true : null;
-  }
+  protected disabledAttr = computed(() => {
+    const disabled = this.disabled() != null && this.disabled() !== false;
+    return disabled || this.loading() ? true : null;
+  });
 
-  @Input() loading = false;
-  @Input() disabled = false;
+  /**
+   * Determine whether it is appropriate to display the disabled styles. We only want to show
+   * the disabled styles if the button is truly disabled, or if the loading styles are also
+   * visible.
+   *
+   * We can't use `disabledAttr` for this, because it returns `true` when `loading` is `true`.
+   * We only want to show disabled styles during loading if `showLoadingStyles` is `true`.
+   */
+  protected showDisabledStyles = computed(() => {
+    return this.showLoadingStyle() || (this.disabledAttr() && this.loading() === false);
+  });
+
+  loading = model(false);
+
+  /**
+   * Determine whether it is appropriate to display a loading spinner. We only want to show
+   * a spinner if it's been more than 75 ms since the `loading` state began. This prevents
+   * a spinner "flash" for actions that are synchronous/nearly synchronous.
+   *
+   * We can't use `loading` for this, because we still need to disable the button during
+   * the full `loading` state. I.e. we only want the spinner to be debounced, not the
+   * loading state.
+   *
+   * This pattern of converting a signal to an observable and back to a signal is not
+   * recommended. TODO -- find better way to use debounce with signals (CL-596)
+   */
+  protected showLoadingStyle = toSignal(
+    toObservable(this.loading).pipe(debounce((isLoading) => interval(isLoading ? 75 : 0))),
+  );
+
+  disabled = model<boolean>(false);
 
   getFocusTarget() {
     return this.elementRef.nativeElement;