self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2025-11-27 22:38:10 +02:00
Code Issues Releases Activity

Improve flickering when new photo is shown in the same directory (grid component) #1060

Browse Source
This commit is contained in:
Patrik J. Braun
2025-11-11 22:04:20 +01:00
parent 67beaac446
commit 44bab74a5b
2 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/frontend/app/ui/gallery/grid/grid.gallery.component.html
View File

@@ -1,4 +1,5 @@
<div #gridContainer [style.width]="renderDelayTimer ? containerWidth+'px' : ''">
<div #gridContainer [style.min-height]="containerMinHeight+'px'"
[style.width]="renderDelayTimer ? containerWidth+'px' : ''">
<ng-container *ngIf="mediaToRender?.length > 0">
<ng-container *ngFor="let group of mediaToRender">
<ng-container *ngIf="group.name">
@@ -10,11 +11,11 @@
</h6>
</div>
<div *ngSwitchCase="GroupByTypes.PersonCount" class="mt-4 mb-3">
<h6 class="ms-2">{{group.name}}
<h6 class="ms-2">{{ group.name }}
<ng-icon class="ms-1" name="ionPeopleOutline"></ng-icon>
</h6>
</div>
<div *ngSwitchDefault class="mt-4 mb-3"><h6 class="ms-2">{{group.name}}</h6></div>
<div *ngSwitchDefault class="mt-4 mb-3"><h6 class="ms-2">{{ group.name }}</h6></div>
</ng-container>
</ng-container>

6
src/frontend/app/ui/gallery/grid/grid.gallery.component.ts
View File

@@ -58,6 +58,7 @@ export class GalleryGridComponent
@Input() mediaGroups: MediaGroup[];
mediaToRender: GridMediaGroup[] = [];
containerWidth = 0;
containerMinHeight = 0; // used to fix container height while updating photos to prevent flickering
screenHeight = 0;
isAfterViewInit = false;
subscriptions: {
@@ -94,9 +95,14 @@ export class GalleryGridComponent
if (this.isAfterViewInit === false) {
return;
}
this.containerMinHeight = this.gridContainer.nativeElement.clientHeight; // reduce flickering
this.updateContainerDimensions();
this.mergeNewPhotos();
this.renderMinimalPhotos();
setTimeout(() => {
this.containerMinHeight = 0; // remove min height after new photos are rendered
}, 0);
}
ngOnInit(): void {