From 47e8a2289740c04211be772bd095107a6041c002 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@photoprism.app>
Date: Thu, 31 Mar 2022 12:27:30 +0200
Subject: [PATCH] UX: Fix photo viewer loading #1438

---
 frontend/src/pages/album/photos.vue | 14 ++++++++------
 frontend/src/pages/photos.vue       | 14 ++++++++------
 frontend/src/share/photos.vue       | 14 ++++++++------
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/frontend/src/pages/album/photos.vue b/frontend/src/pages/album/photos.vue
index 394222a95..e77de2b58 100644
--- a/frontend/src/pages/album/photos.vue
+++ b/frontend/src/pages/album/photos.vue
@@ -198,9 +198,9 @@ export default {
           // Reuse existing viewer result if possible.
           const i = this.viewer.results.findIndex(p => p.uid === selected.UID);
           if (i > -1 && (
-            (this.complete && this.viewer.results.length === this.results.length) ||
-            (this.viewer.complete && this.viewer.results.length > this.results.length) ||
-            (this.viewer.results.length - i < this.viewer.batchSize))
+            (this.complete && this.viewer.results.length >= this.results.length) ||
+            (this.viewer.complete && this.viewer.results.length >= this.results.length) ||
+            ((i + this.viewer.batchSize) <= this.viewer.results.length))
           ) {
             this.$viewer.show(this.viewer.results, i);
             return;
@@ -220,11 +220,13 @@ export default {
           if (count > 0) {
             // Process response.
             if (response.headers && response.headers["x-count"]) {
-              count = parseInt(response.headers["x-count"]);
+              const c = parseInt(response.headers["x-count"]);
+              const l = parseInt(response.headers["x-limit"]);
+              this.viewer.complete = c < l;
             }
+
+            const i = response.data.findIndex(p => p.uid === selected.UID);
             this.viewer.results = Thumb.wrap(response.data);
-            this.viewer.complete = (count < this.batchSize);
-            const i = this.viewer.results.findIndex(p => p.uid === selected.UID);
 
             // Show photos.
             this.$viewer.show(this.viewer.results, i);
diff --git a/frontend/src/pages/photos.vue b/frontend/src/pages/photos.vue
index 5fe87543c..9653f3776 100644
--- a/frontend/src/pages/photos.vue
+++ b/frontend/src/pages/photos.vue
@@ -244,9 +244,9 @@ export default {
           // Reuse existing viewer result if possible.
           const i = this.viewer.results.findIndex(p => p.uid === selected.UID);
           if (i > -1 && (
-            (this.complete && this.viewer.results.length === this.results.length) ||
-            (this.viewer.complete && this.viewer.results.length > this.results.length) ||
-            (this.viewer.results.length - i < this.viewer.batchSize))
+            (this.complete && this.viewer.results.length >= this.results.length) ||
+            (this.viewer.complete && this.viewer.results.length >= this.results.length) ||
+            ((i + this.viewer.batchSize) <= this.viewer.results.length))
           ) {
             this.$viewer.show(this.viewer.results, i);
             return;
@@ -266,11 +266,13 @@ export default {
           if (count > 0) {
             // Process response.
             if (response.headers && response.headers["x-count"]) {
-              count = parseInt(response.headers["x-count"]);
+              const c = parseInt(response.headers["x-count"]);
+              const l = parseInt(response.headers["x-limit"]);
+              this.viewer.complete = c < l;
             }
+
+            const i = response.data.findIndex(p => p.uid === selected.UID);
             this.viewer.results = Thumb.wrap(response.data);
-            this.viewer.complete = (count < this.batchSize);
-            const i = this.viewer.results.findIndex(p => p.uid === selected.UID);
 
             // Show photos.
             this.$viewer.show(this.viewer.results, i);
diff --git a/frontend/src/share/photos.vue b/frontend/src/share/photos.vue
index 661c6d145..48e2057fb 100644
--- a/frontend/src/share/photos.vue
+++ b/frontend/src/share/photos.vue
@@ -254,9 +254,9 @@ export default {
           // Reuse existing viewer result if possible.
           const i = this.viewer.results.findIndex(p => p.uid === selected.UID);
           if (i > -1 && (
-            (this.complete && this.viewer.results.length === this.results.length) ||
-            (this.viewer.complete && this.viewer.results.length > this.results.length) ||
-            (this.viewer.results.length - i < this.viewer.batchSize))
+            (this.complete && this.viewer.results.length >= this.results.length) ||
+            (this.viewer.complete && this.viewer.results.length >= this.results.length) ||
+            ((i + this.viewer.batchSize) <= this.viewer.results.length))
           ) {
             this.$viewer.show(this.viewer.results, i);
             return;
@@ -276,11 +276,13 @@ export default {
           if (count > 0) {
             // Process response.
             if (response.headers && response.headers["x-count"]) {
-              count = parseInt(response.headers["x-count"]);
+              const c = parseInt(response.headers["x-count"]);
+              const l = parseInt(response.headers["x-limit"]);
+              this.viewer.complete = c < l;
             }
+
+            const i = response.data.findIndex(p => p.uid === selected.UID);
             this.viewer.results = Thumb.wrap(response.data);
-            this.viewer.complete = (count < this.batchSize);
-            const i = this.viewer.results.findIndex(p => p.uid === selected.UID);
 
             // Show photos.
             this.$viewer.show(this.viewer.results, i);