diff --git a/addon/components/hyper-table-v2/index.ts b/addon/components/hyper-table-v2/index.ts index 072edc54..edff274d 100644 --- a/addon/components/hyper-table-v2/index.ts +++ b/addon/components/hyper-table-v2/index.ts @@ -75,8 +75,8 @@ export default class HyperTableV2 extends Component { @tracked scrollableTable: boolean = false; @tracked initialFetchColumnsDone: boolean = false; @tracked initialLoadAnimationActive: boolean = false; - @tracked initialLoadAnimationPlayed: boolean = false; + private initialLoadAnimationPlayed: boolean = false; private initialLoadAnimationTimeout?: number; declare private hypertableInstanceID: string; @@ -84,10 +84,11 @@ export default class HyperTableV2 extends Component { constructor(owner: unknown, args: HyperTableV2Args) { super(owner, args); args.handler.fetchColumnDefinitions(); + this.activateInitialLoadAnimationIfNeeded(); args.handler.fetchColumns().then(() => { this.initialFetchColumnsDone = true; args.handler.fetchRows().finally(() => { - this.activateInitialLoadAnimationIfNeeded(); + this.finalizeInitialLoadAnimation(); }); this.computeScrollableTable(); }); @@ -280,12 +281,19 @@ export default class HyperTableV2 extends Component { return; } - if (this.args.handler.communicationError || this.args.handler.rows.length === 0) { + this.initialLoadAnimationPlayed = true; + this.initialLoadAnimationActive = true; + } + + private finalizeInitialLoadAnimation(): void { + if (!this.initialLoadAnimationActive || !this.initialLoadAnimation) { return; } - this.initialLoadAnimationPlayed = true; - this.initialLoadAnimationActive = true; + if (this.args.handler.communicationError || this.args.handler.rows.length === 0) { + this.initialLoadAnimationActive = false; + return; + } const rowsAnimationWindowMs = Math.max(this.args.handler.rows.length - 1, 0) * this.initialLoadAnimation.staggerMs; const activeDurationMs =