fix: wait for progressive virtual render before fLoaded (#284)

* fix: wait for progressive virtual render before fLoaded

Fixes #281

* chore(package): bump version to 18.2.1
- Updated version from 18.1.0 to 18.2.1 in package.json
- Ensured consistency in versioning for release

---------

Co-authored-by: shuzarevich <s.huzarevich@redcore.group>

Author: siarheihuzarevich

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "18.1.0",
+  "version": "18.2.1",
   "description": "Angular-native node-based UI library for building node editors, workflow builders, and interactive graph interfaces.",
   "author": "Siarhei Huzarevich",
   "homepage": "https://flow.foblex.com",

projects/f-flow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foblex/flow",
-  "version": "18.2.0",
+  "version": "18.2.1",
   "description": "Angular-native node-based UI library for building node editors, workflow builders, and interactive graph interfaces.",
   "main": "index.js",
   "types": "index.d.ts",

projects/f-flow/src/f-flow/f-flow.component.spec.ts

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { FFlowModule } from '../f-flow.module';
+import { FComponentsStore } from '../f-storage';
+import { FFlowComponent } from './f-flow.component';
+
+@Component({
+  standalone: true,
+  imports: [FFlowModule],
+  template: `
+    <f-flow (fLoaded)="loadedIds.push($event)">
+      <f-canvas></f-canvas>
+    </f-flow>
+  `,
+})
+class HostComponent {
+  public loadedIds: string[] = [];
+}
+
+describe('FFlowComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+  });
+
+  it('should wait for progressive rendering before emitting fLoaded', fakeAsync(() => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+
+    const flowDebugElement = fixture.debugElement.query(By.directive(FFlowComponent));
+    const store = flowDebugElement.injector.get(FComponentsStore);
+
+    store.beginProgressiveRender();
+    store.emitNodeChanges();
+
+    tick(300);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.loadedIds).toEqual([]);
+
+    store.endProgressiveRender();
+
+    tick(300);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.loadedIds.length).toBe(1);
+    expect(fixture.componentInstance.loadedIds[0]).toContain('f-flow-');
+  }));
+});

projects/f-flow/src/f-flow/f-flow.component.ts

@@ -36,9 +36,9 @@ import { FMediator } from '@foblex/mediator';
 import { F_DRAGGABLE_PROVIDERS, FDraggableDataContext } from '../f-draggable';
 import {
   EmitConnectionsChangesRequest,
+  FComponentsStore,
   F_STORAGE_PROVIDERS,
   ListenConnectionsChangesRequest,
-  ListenNodesChangesRequest,
 } from '../f-storage';
 import { BrowserService } from '@foblex/platform';
 import { afterNextPaint, debounceTime, FChannelHub, notifyOnStart, takeOne } from '../reactivity';
@@ -75,6 +75,7 @@ export class FFlowComponent extends FFlowBase implements OnInit, AfterContentIni
   private readonly _destroyRef = inject(DestroyRef);
   private readonly _mediator = inject(FMediator);
   private readonly _browser = inject(BrowserService);
+  private readonly _componentsStore = inject(FComponentsStore);
   private readonly _cache = inject(F_CACHE_OPTIONS);
   private readonly _injector = inject(Injector);
   private readonly _worker = inject(FConnectionWorker);
@@ -111,14 +112,20 @@ export class FFlowComponent extends FFlowBase implements OnInit, AfterContentIni
   }
 
   private _listenNodesChanges(): void {
-    this._mediator
-      .execute<FChannelHub>(new ListenNodesChangesRequest())
+    new FChannelHub(
+      this._componentsStore.nodesChanges$,
+      this._componentsStore.progressiveRenderChanges$,
+    )
       .pipe(notifyOnStart(), debounceTime(SORT_ITEM_LAYERS_DEBOUNCE_MS), afterNextPaint())
       .listen(this._destroyRef, () => {
         if (this._mediator.execute(new IsDragStartedRequest())) {
           return;
         }
 
+        if (this._componentsStore.hasPendingProgressiveRender) {
+          return;
+        }
+
         this._mediator.execute(new SortItemLayersRequest());
         this._mediator.execute<void>(new EmitConnectionsChangesRequest());
 

projects/f-flow/src/f-storage/f-components-store.ts

@@ -27,6 +27,9 @@ export class FComponentsStore {
   public readonly nodesChanges$ = new FChannel();
   private _nodesRevision = 0;
 
+  public readonly progressiveRenderChanges$ = new FChannel();
+  private _pendingProgressiveRenderCount = 0;
+
   public get connectionsRevision(): number {
     return this._connectionsRevision;
   }
@@ -35,6 +38,10 @@ export class FComponentsStore {
     return this._nodesRevision;
   }
 
+  public get hasPendingProgressiveRender(): boolean {
+    return this._pendingProgressiveRenderCount > 0;
+  }
+
   public get flowHost(): HTMLElement {
     return this.fFlow?.hostElement as HTMLElement;
   }
@@ -69,6 +76,20 @@ export class FComponentsStore {
     this.connectionsChanges$.notify();
   }
 
+  public beginProgressiveRender(): void {
+    this._pendingProgressiveRenderCount++;
+    this.progressiveRenderChanges$.notify();
+  }
+
+  public endProgressiveRender(): void {
+    if (!this._pendingProgressiveRenderCount) {
+      return;
+    }
+
+    this._pendingProgressiveRenderCount--;
+    this.progressiveRenderChanges$.notify();
+  }
+
   public transformChanged(): void {
     this.transformChanges$.notify();
   }

projects/f-flow/src/f-virtual/f-virtual-for.ts

@@ -5,10 +5,12 @@ import {
   Input,
   NgZone,
   OnChanges,
+  OnDestroy,
   SimpleChanges,
   TemplateRef,
   ViewContainerRef,
 } from '@angular/core';
+import { FComponentsStore } from '../f-storage';
 
 interface FVirtualContext<T> {
   $implicit: T;
@@ -19,15 +21,18 @@ interface FVirtualContext<T> {
   selector: '[fVirtualFor][fVirtualForOf]',
   standalone: true,
 })
-export class FVirtualFor<T> implements OnChanges {
+export class FVirtualFor<T> implements OnChanges, OnDestroy {
   @Input() fVirtualForOf: readonly T[] = [];
   @Input() fVirtualForTrackBy?: (index: number, item: T) => unknown;
 
   private readonly _vc = inject(ViewContainerRef);
   private readonly _tpl = inject<TemplateRef<FVirtualContext<T>>>(TemplateRef);
   private readonly _zone = inject(NgZone);
+  private readonly _componentsStore = inject(FComponentsStore, { optional: true });
 
   private _views: EmbeddedViewRef<FVirtualContext<T>>[] = [];
+  private _rafId: number | null = null;
+  private _isProgressiveRenderActive = false;
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['fVirtualForOf']) {
@@ -36,14 +41,25 @@ export class FVirtualFor<T> implements OnChanges {
     }
   }
 
+  ngOnDestroy(): void {
+    this._reset();
+  }
+
   private _reset(): void {
+    if (this._rafId !== null) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+
+    this._finishProgressiveRender();
     this._vc.clear();
     this._views.length = 0;
   }
 
   private _renderProgressively(): void {
     const FRAME_BUDGET = 10; // ms
     let index = 0;
+    this._startProgressiveRender();
 
     this._zone.runOutsideAngular(() => {
       const pump = () => {
@@ -62,11 +78,34 @@ export class FVirtualFor<T> implements OnChanges {
         }
 
         if (index < this.fVirtualForOf.length) {
-          requestAnimationFrame(pump);
+          this._rafId = requestAnimationFrame(pump);
+
+          return;
         }
+
+        this._rafId = null;
+        this._finishProgressiveRender();
       };
 
-      requestAnimationFrame(pump);
+      this._rafId = requestAnimationFrame(pump);
     });
   }
+
+  private _startProgressiveRender(): void {
+    if (this._isProgressiveRenderActive) {
+      return;
+    }
+
+    this._isProgressiveRenderActive = true;
+    this._componentsStore?.beginProgressiveRender();
+  }
+
+  private _finishProgressiveRender(): void {
+    if (!this._isProgressiveRenderActive) {
+      return;
+    }
+
+    this._isProgressiveRenderActive = false;
+    this._componentsStore?.endProgressiveRender();
+  }
 }