Fix issues with rendering and freezing on scrolling

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component.ts

@@ -25,19 +25,26 @@ export class FileGalleryEntryComponent implements OnInit, OnChanges {
   contentUrl: SafeResourceUrl | undefined;
 
   private cachedFile: File | undefined;
+  private urlSetTimeout: number | undefined;
 
   constructor(@Inject(DomSanitizer) private sanitizer: DomSanitizer, private fileService: FileService, private errorBroker: ErrorBrokerService) {
   }
 
-  async ngOnChanges(changes: SimpleChanges): Promise<void> {
+  ngOnChanges(changes: SimpleChanges) {
     if (changes["file"] && (!this.cachedFile || this.file.data.hash !== this.cachedFile!.hash)) { // handle changes to the file when the component is not destroyed
       this.cachedFile = this.file.data;
-      this.contentUrl = this.fileService.buildThumbnailUrl(this.file.data, 250, 250);
+      this.setImageDelayed();
     }
   }
 
-  async ngOnInit() {
+  ngOnInit() {
     this.cachedFile = this.file.data;
-    this.contentUrl = this.fileService.buildThumbnailUrl(this.file.data, 250, 250);
+    this.setImageDelayed();
+  }
+
+  private setImageDelayed() {
+    this.contentUrl = undefined;
+    clearTimeout(this.urlSetTimeout);
+    this.urlSetTimeout = setTimeout(() => this.contentUrl = this.fileService.buildThumbnailUrl(this.file.data, 250, 250), 500);
   }
 }

mediarepo-ui/src/app/components/file-gallery/file-gallery.component.ts

@@ -43,6 +43,8 @@ export class FileGalleryComponent implements OnChanges, OnInit {
   public imagePosition = {x: 0, y: 0};
   public mouseInImageView = false;
 
+  private scrollTimeout: number | undefined;
+
   constructor(private tabService: TabService, private fileService: FileService) {
     tabService.selectedTab.subscribe(() => this.adjustElementSizes());
   }
@@ -61,7 +63,8 @@ export class FileGalleryComponent implements OnChanges, OnInit {
       await this.loadSelectedFile();
 
       if (this.virtualScroll) {
-        this.scrollToSelection();
+        clearTimeout(this.scrollTimeout);
+        this.scrollTimeout = setTimeout(() => this.scrollToSelection(), 0);  // we need to make sure the viewport has rendered
       }
 
       this.fileSelectEvent.emit(this.selectedFile.data);
@@ -100,15 +103,17 @@ export class FileGalleryComponent implements OnChanges, OnInit {
   }
 
   public async ngOnChanges(changes: SimpleChanges): Promise<void> {
-    this.entries = this.files.map(
-      f => new Selectable(f, f.hash == this.selectedFile?.data.hash));
-    const selectedIndex = this.files.findIndex(
-      f => f.hash === this.selectedFile?.data.hash);
-
-    if (!this.selectedFile || selectedIndex < 0) {
-      await this.onEntrySelect(this.getPreselectedEntry() ?? this.entries[0])
-    } else {
-      await this.onEntrySelect(this.entries[selectedIndex])
+    if (changes["files"]) {
+      this.entries = this.files.map(
+        f => new Selectable(f, f.hash == this.selectedFile?.data.hash));
+      const selectedIndex = this.files.findIndex(
+        f => f.hash === this.selectedFile?.data.hash);
+
+      if (!this.selectedFile || selectedIndex < 0) {
+        await this.onEntrySelect(this.getPreselectedEntry() ?? this.entries[0])
+      } else {
+        await this.onEntrySelect(this.entries[selectedIndex])
+      }
     }
   }
 

mediarepo-ui/src/app/components/file-grid/file-grid-entry/file-grid-entry.component.ts

@@ -29,21 +29,27 @@ export class FileGridEntryComponent implements OnInit, OnChanges {
 
   contentUrl: SafeResourceUrl | undefined;
   private cachedFile: File | undefined;
+  private urlSetTimeout: number | undefined;
 
   constructor(private fileService: FileService, private errorBroker: ErrorBrokerService) {
   }
 
   async ngOnInit() {
     this.cachedFile = this.gridEntry.file;
-    this.contentUrl = this.fileService.buildThumbnailUrl(this.gridEntry.file,
-      250, 250);
+    this.setImageDelayed();
   }
 
   async ngOnChanges(changes: SimpleChanges) {
     if (changes["file"] && (!this.cachedFile || this.gridEntry.file.hash !== this.cachedFile.hash)) {
       this.cachedFile = this.gridEntry.file;
-      this.contentUrl = this.fileService.buildThumbnailUrl(this.gridEntry.file,
-        250, 250);
+      this.setImageDelayed();
     }
   }
+
+  private setImageDelayed() {
+    this.contentUrl = undefined;
+    clearTimeout(this.urlSetTimeout);
+    this.urlSetTimeout = setTimeout(() => this.contentUrl = this.fileService.buildThumbnailUrl(this.gridEntry.file,
+      250, 250), 500);
+  }
 }

mediarepo-ui/src/app/components/file-grid/file-grid.component.html

@@ -1,5 +1,5 @@
 <div class="file-gallery-inner">
-  <cdk-virtual-scroll-viewport #virtualScrollGrid class="file-scroll" itemSize="250" maxBufferPx="500"
+  <cdk-virtual-scroll-viewport #virtualScrollGrid class="file-scroll" itemSize="250" maxBufferPx="2000"
                                minBufferPx="500">
     <div *cdkVirtualFor="let rowEntry of partitionedGridEntries">
       <div class="file-row">

mediarepo-ui/src/app/pages/home/files-tab/files-tab.component.html

@@ -1,4 +1,4 @@
-<mat-drawer-container>
+<mat-drawer-container autosize>
   <mat-drawer disableClose mode="side" opened>
     <app-files-tab-sidebar (searchEndEvent)="this.contentLoading = false"
                            (searchStartEvent)="this.contentLoading = true"