From 2a6f516237e7421092b2a3ab66b25dcf189ca5a3 Mon Sep 17 00:00:00 2001
From: nsemets <nsemets@exoft.net>
Date: Fri, 12 Dec 2025 15:37:50 +0200
Subject: [PATCH] fix(files-widget): updated virtual scroll

---
 .../files-widget/files-widget.component.html  |  1 +
 .../overview/store/project-overview.state.ts  | 19 +++++++++++++++++++
 .../files-tree/files-tree.component.html      | 15 ++++++++-------
 .../files-tree/files-tree.component.ts        | 11 ++---------
 .../stores/contributors/contributors.state.ts |  2 +-
 5 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/app/features/project/overview/components/files-widget/files-widget.component.html b/src/app/features/project/overview/components/files-widget/files-widget.component.html
index 45d14eec0..6f639f663 100644
--- a/src/app/features/project/overview/components/files-widget/files-widget.component.html
+++ b/src/app/features/project/overview/components/files-widget/files-widget.component.html
@@ -43,6 +43,7 @@ <h2>{{ 'project.overview.files.filesPreview' | translate }}</h2>
     [resourceId]="selectedRoot!"
     [provider]="provider()"
     [selectionMode]="null"
+    [scrollHeight]="'300px'"
     (entryFileClicked)="navigateToFile($event)"
     (loadFiles)="onLoadFiles($event)"
     (setCurrentFolder)="setCurrentFolder($event)"
diff --git a/src/app/features/project/overview/store/project-overview.state.ts b/src/app/features/project/overview/store/project-overview.state.ts
index 08090fb32..16a944ac1 100644
--- a/src/app/features/project/overview/store/project-overview.state.ts
+++ b/src/app/features/project/overview/store/project-overview.state.ts
@@ -42,6 +42,11 @@ export class ProjectOverviewState {
   @Action(GetProjectById)
   getProjectById(ctx: StateContext<ProjectOverviewStateModel>, action: GetProjectById) {
     const state = ctx.getState();
+
+    if (state.project.isLoading) {
+      return;
+    }
+
     ctx.patchState({
       project: {
         ...state.project,
@@ -67,6 +72,11 @@ export class ProjectOverviewState {
   @Action(GetProjectInstitutions)
   getProjectInstitutions(ctx: StateContext<ProjectOverviewStateModel>, action: GetProjectInstitutions) {
     const state = ctx.getState();
+
+    if (state.institutions.isLoading) {
+      return;
+    }
+
     ctx.patchState({
       institutions: {
         ...state.institutions,
@@ -91,6 +101,11 @@ export class ProjectOverviewState {
   @Action(GetProjectIdentifiers)
   getProjectIdentifiers(ctx: StateContext<ProjectOverviewStateModel>, action: GetProjectIdentifiers) {
     const state = ctx.getState();
+
+    if (state.identifiers.isLoading) {
+      return;
+    }
+
     ctx.patchState({
       identifiers: {
         ...state.identifiers,
@@ -120,6 +135,10 @@ export class ProjectOverviewState {
 
     const state = ctx.getState();
 
+    if (state.license.isLoading) {
+      return;
+    }
+
     ctx.patchState({
       license: {
         ...state.license,
diff --git a/src/app/shared/components/files-tree/files-tree.component.html b/src/app/shared/components/files-tree/files-tree.component.html
index 24856541c..ed9f64281 100644
--- a/src/app/shared/components/files-tree/files-tree.component.html
+++ b/src/app/shared/components/files-tree/files-tree.component.html
@@ -24,18 +24,19 @@
     <div class="flex-1">
       <div class="files-table flex">
         <p-tree
-          [value]="nodes()"
+          class="tree-table"
+          styleClass="w-full md:w-[30rem]"
           [draggableNodes]="!hasViewOnly() && supportUpload()"
           [droppableNodes]="!hasViewOnly() && supportUpload()"
-          (onScrollIndexChange)="onScrollIndexChange($event)"
-          [scrollHeight]="scrollHeight()"
-          [virtualScroll]="true"
-          [virtualScrollItemSize]="virtualScrollItemSize"
-          styleClass="w-full md:w-[30rem]"
-          class="tree-table"
+          [lazy]="true"
           [loading]="isLoadingMore()"
           [selectionMode]="selectionMode()"
           [selection]="selectedFiles()"
+          [scrollHeight]="scrollHeight()"
+          [value]="nodes()"
+          [virtualScroll]="true"
+          [virtualScrollItemSize]="virtualScrollItemSize"
+          (onLazyLoad)="onLazyLoad($event)"
           (onNodeSelect)="onNodeSelect($event)"
           (onNodeUnselect)="onNodeUnselect($event)"
           (onNodeDrop)="onNodeDrop($event)"
diff --git a/src/app/shared/components/files-tree/files-tree.component.ts b/src/app/shared/components/files-tree/files-tree.component.ts
index c094a6ec6..133f4b575 100644
--- a/src/app/shared/components/files-tree/files-tree.component.ts
+++ b/src/app/shared/components/files-tree/files-tree.component.ts
@@ -3,7 +3,7 @@ import { select } from '@ngxs/store';
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { PrimeTemplate } from 'primeng/api';
-import { Tree, TreeNodeDropEvent, TreeNodeSelectEvent, TreeScrollIndexChangeEvent } from 'primeng/tree';
+import { Tree, TreeLazyLoadEvent, TreeNodeDropEvent, TreeNodeSelectEvent } from 'primeng/tree';
 
 import { Clipboard } from '@angular/cdk/clipboard';
 import { DatePipe, isPlatformBrowser } from '@angular/common';
@@ -163,13 +163,6 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit {
         this.isLoadingMore.set(false);
       }
     });
-
-    effect(() => {
-      const loaded = this.files().length;
-      if (loaded < this.visibleFilesCount()) {
-        this.loadNextPage();
-      }
-    });
   }
 
   ngAfterViewInit(): void {
@@ -440,7 +433,7 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit {
     }
   }
 
-  onScrollIndexChange(event: TreeScrollIndexChangeEvent) {
+  onLazyLoad(event: TreeLazyLoadEvent) {
     const loaded = this.files().length;
     if (event.last >= loaded - 1) {
       this.loadNextPage();
diff --git a/src/app/shared/stores/contributors/contributors.state.ts b/src/app/shared/stores/contributors/contributors.state.ts
index e3cf92b6e..c5ec57c26 100644
--- a/src/app/shared/stores/contributors/contributors.state.ts
+++ b/src/app/shared/stores/contributors/contributors.state.ts
@@ -302,7 +302,7 @@ export class ContributorsState {
   getBibliographicContributors(ctx: StateContext<ContributorsStateModel>, action: GetBibliographicContributors) {
     const state = ctx.getState();
 
-    if (!action.resourceId || !action.resourceType) {
+    if (!action.resourceId || !action.resourceType || state.bibliographicContributorsList.isLoading) {
       return;
     }