fix(command): initial flicker (#75)

Author: stephenlautier

CHANGELOG.md

@@ -1,5 +1,11 @@
 <!-- ## [vNext](https://github.com/sktch7/ngx.command/compare/2.0.0...3.0.0) (2020-x-x) -->
 
+## [2.2.0](https://github.com/sketch7/ngx.command/compare/2.1.0...2.1.1) (2022-11-02)
+
+### Bug Fixes
+
+- **command:** avoid set disabled initially + remove delay when setting in order to avoid flickers - by default, can be optionally changed via `hasDisabledDelay` when needed for example with material
+
 ## [2.1.1](https://github.com/sketch7/ngx.command/compare/2.1.0...2.1.1) (2022-09-26)
 
 ### Bug Fixes

examples/projects/example-app/src/app/app.module.ts

@@ -29,7 +29,8 @@ const materialModules = [
 		BrowserAnimationsModule,
 
 		SsvCommandModule.forRoot({
-			executingCssClass: "is-busy"
+			executingCssClass: "is-busy",
+			hasDisabledDelay: false
 		}),
 		materialModules,
 	],

examples/projects/example-app/src/app/command/example-command.component.html

@@ -86,13 +86,41 @@ <h1>Command</h1>
 
       <button mat-raised-button
         color="primary"
+        disabled
         [ssvCommand]="saveCmd">
         <i *ngIf="saveCmd.isExecuting"
           class="ai-circled ai-indicator ai-dark-spin small"></i>
         Save
         <small>with [ssvCommand]</small>
       </button>
 
+      <button color="primary"
+        [ssvCommand]="saveCmd">
+        <i *ngIf="saveCmd.isExecuting"
+          class="ai-circled ai-indicator ai-dark-spin small"></i>
+        Save
+        <small>with [ssvCommand]</small>
+      </button>
+
+      <button color="primary"
+        [ssvCommand]="saveCmdNoValidation">
+        <i *ngIf="saveCmdNoValidation.isExecuting"
+          class="ai-circled ai-indicator ai-dark-spin small"></i>
+        Save
+        <small>with [ssvCommand] - no canExecute</small>
+      </button>
+
+      <button mat-raised-button
+        color="primary"
+				disabled
+        [ssvCommand]="saveCmdNoValidation"
+				[ssvCommandOptions]="{hasDisabledDelay: true}">
+        <i *ngIf="saveCmdNoValidation.isExecuting"
+          class="ai-circled ai-indicator ai-dark-spin small"></i>
+        Save
+        <small>with [ssvCommand] - no canExecute</small>
+      </button>
+
       <button mat-raised-button
         color="primary"
         [ssvCommand]="saveCmd"

examples/projects/example-app/src/app/command/example-command.component.ts

@@ -42,6 +42,7 @@ export class ExampleCommandComponent {
 	isValidHeroRemove$ = new BehaviorSubject(true);
 
 	saveCmd = new CommandAsync(this.save$.bind(this), this.isValid$);
+	saveCmdNoValidation = new CommandAsync(this.save$.bind(this));
 	removeHeroCmd = new CommandAsync(this.removeHero$.bind(this), this.isValidHeroRemove$);
 	pauseHeroCmd = new CommandAsync(this.pauseHero$.bind(this), this.isValidHeroRemove$);
 	saveReduxCmd = new CommandAsync(

src/command-ref.directive.ts

@@ -5,6 +5,8 @@ import { ICommand, CommandCreator } from "./command.model";
 import { isCommandCreator } from "./command.util";
 import { Command } from "./command";
 
+const NAME_CAMEL = "ssvCommandRef";
+
 /**
  * Command creator ref, directive which allows creating Command in the template
  * and associate it to a command (in order to share executions).
@@ -23,12 +25,12 @@ import { Command } from "./command";
  *
  */
 @Directive({
-	selector: "[ssvCommandRef]",
-	exportAs: "ssvCommandRef"
+	selector: `[${NAME_CAMEL}]`,
+	exportAs: NAME_CAMEL
 })
 export class CommandRefDirective implements OnInit, OnDestroy {
 
-	@Input("ssvCommandRef") commandCreator: CommandCreator | undefined;
+	@Input(NAME_CAMEL) commandCreator: CommandCreator | undefined;
 
 	get command(): ICommand { return this._command; }
 	private _command!: ICommand;
@@ -40,7 +42,7 @@ export class CommandRefDirective implements OnInit, OnDestroy {
 			const execFn = this.commandCreator.execute.bind(this.commandCreator.host);
 			this._command = new Command(execFn, this.commandCreator.canExecute as Observable<boolean> | undefined, isAsync);
 		} else {
-			throw new Error("ssvCommandRef: [ssvCommandRef] is not defined properly!");
+			throw new Error(`${NAME_CAMEL}: [${NAME_CAMEL}] is not defined properly!`);
 		}
 	}
 

src/command.directive.ts

@@ -60,17 +60,21 @@ import { CommandCreator, ICommand } from "./command.model";
  *
  */
 
-const SELECTOR = "ssvCommand";
+const NAME_CAMEL = "ssvCommand";
+
+// let nextUniqueId = 0;
 
 @Directive({
-	selector: `[${SELECTOR}]`,
-	exportAs: "ssvCommand"
+	selector: `[${NAME_CAMEL}]`,
+	exportAs: NAME_CAMEL
 })
 export class CommandDirective implements OnInit, OnDestroy {
 
-	@Input(SELECTOR) commandOrCreator: ICommand | CommandCreator | undefined;
+	// readonly id = `${NAME_CAMEL}-${nextUniqueId++}`;
+
+	@Input(NAME_CAMEL) commandOrCreator: ICommand | CommandCreator | undefined;
 
-	@Input(`${SELECTOR}Options`)
+	@Input(`${NAME_CAMEL}Options`)
 	get commandOptions(): CommandOptions { return this._commandOptions; }
 	set commandOptions(value: CommandOptions) {
 		if (value === this._commandOptions) {
@@ -82,7 +86,7 @@ export class CommandDirective implements OnInit, OnDestroy {
 		};
 	}
 
-	@Input(`${SELECTOR}Params`) commandParams: unknown | unknown[];
+	@Input(`${NAME_CAMEL}Params`) commandParams: unknown | unknown[];
 
 	get command(): ICommand { return this._command; }
 	private _command!: ICommand;
@@ -98,9 +102,8 @@ export class CommandDirective implements OnInit, OnDestroy {
 
 	ngOnInit(): void {
 		// console.log("[ssvCommand::init]", this.config);
-		this.trySetDisabled(true);
 		if (!this.commandOrCreator) {
-			throw new Error("ssvCommand: [ssvCommand] should be defined!");
+			throw new Error(`${NAME_CAMEL}: [${NAME_CAMEL}] should be defined!`);
 		} else if (isCommand(this.commandOrCreator)) {
 			this._command = this.commandOrCreator;
 		} else if (isCommandCreator(this.commandOrCreator)) {
@@ -122,12 +125,14 @@ export class CommandDirective implements OnInit, OnDestroy {
 			// });
 			this._command = new Command(execFn, canExec, isAsync);
 		} else {
-			throw new Error("ssvCommand: [ssvCommand] is not defined properly!");
+			throw new Error(`${NAME_CAMEL}: [${NAME_CAMEL}] is not defined properly!`);
 		}
 
 		this._command.subscribe();
 		this._command.canExecute$.pipe(
-			delay(1),
+			this.commandOptions.hasDisabledDelay
+				? delay(1)
+				: tap(() => { /* stub */ }),
 			tap(x => {
 				this.trySetDisabled(!x);
 				// console.log("[ssvCommand::canExecute$]", { canExecute: x });
@@ -178,6 +183,7 @@ export class CommandDirective implements OnInit, OnDestroy {
 
 	private trySetDisabled(disabled: boolean) {
 		if (this.commandOptions.handleDisabled) {
+			// console.warn(">>>> disabled", { id: this.id, disabled });
 			this.renderer.setProperty(this.element.nativeElement, "disabled", disabled);
 		}
 	}

src/config.ts

@@ -11,11 +11,17 @@ export interface CommandOptions {
 	 * This disables the handling manually and need to pass explicitly `[disabled]="!saveCmd.canExecute"`.
 	 */
 	handleDisabled: boolean;
+
+	/** Determine whether to set a `delay(1)` when setting the disabled. Which might be needed when working with external
+	 * components/directives (such as material button)
+	 */
+	hasDisabledDelay: boolean;
 }
 
-export const COMMAND_DEFAULT_CONFIG: Readonly<CommandOptions> = Object.freeze({
+export const COMMAND_DEFAULT_CONFIG = Object.freeze({
 	executingCssClass: "executing",
 	handleDisabled: true,
-});
+	hasDisabledDelay: false,
+} as CommandOptions);
 
 export const COMMAND_CONFIG = new InjectionToken<CommandOptions>("command-config");