johanels/photoprism
1
0
Fork 0
mirror of https://github.com/photoprism/photoprism.git synced 2025-12-12 00:34:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

UX: Maintain scroll position when refreshing search results #4985

Browse Source 
Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
Michael Mayer
2025-05-03 10:05:53 +02:00
parent bd4b7b3ad3
commit c80f703ecd
7 changed files with 73 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/page/album/photos.vue
View File

@@ -487,19 +487,24 @@ export default {
refresh(props) {
this.updateSettings(props);
// Do not refresh results if the view is already loading
// or should not be listening for events.
if (this.loading || !this.listen) {
return;
}
/*
TODO: Leaving "loading" untouched here avoids flickering when refreshing the results, which might lead to a
smoother experience. If it doesn't cause any problems or unwanted side effects, this line can be removed.
// Make sure enough results are loaded to maintain the scroll position.
if (this.page > 2) {
this.page = this.page - 1;
} else {
this.page = 1;
}
this.loading = true;
*/
this.page = 0;
// Flag results as dirty and incomplete to force a refresh.
this.dirty = true;
this.complete = false;
// Enable infinite scrolling if it was disabled.
this.scrollDisabled = false;
this.loadMore(true);

18
frontend/src/page/albums.vue
View File

@@ -995,19 +995,25 @@ export default {
refresh(props) {
this.updateSettings(props);
// Do not refresh results if the view is already loading
// or should not be listening for events.
if (this.loading || !this.listen) {
return;
}
/*
TODO: Leaving "loading" untouched here avoids flickering when refreshing the results, which might lead to a
smoother experience. If it doesn't cause any problems or unwanted side effects, this line can be removed.
// Make sure enough results are loaded to maintain the scroll position.
if (this.page > 2) {
this.page = this.page - 1;
} else {
this.page = 1;
}
this.loading = true;
*/
this.page = 0;
// Flag results as dirty to force a refresh.
this.dirty = true;
// Enable infinite scrolling if it was disabled.
this.scrollDisabled = false;
this.loadMore();
},
create() {

17
frontend/src/page/labels.vue
View File

@@ -646,18 +646,23 @@ export default {
refresh(props) {
this.updateSettings(props);
// Do not refresh results if the view is already loading
// or should not be listening for events.
if (this.loading || !this.listen) {
return;
}
/*
TODO: Leaving "loading" untouched here avoids flickering when refreshing the results, which might lead to a
smoother experience. If it doesn't cause any problems or unwanted side effects, this line can be removed.
// Make sure enough results are loaded to maintain the scroll position.
if (this.page > 2) {
this.page = this.page - 1;
} else {
this.page = 1;
}
this.loading = true;
*/
this.page = 0;
// Flag results as dirty to force a refresh.
this.dirty = true;
// Enable infinite scrolling if it was disabled.
this.scrollDisabled = false;
this.loadMore();

14
frontend/src/page/library/browse.vue
View File

@@ -421,14 +421,16 @@ export default {
return;
}
/*
TODO: Leaving "loading" untouched here avoids flickering when refreshing the results, which might lead to a
smoother experience. If it doesn't cause any problems or unwanted side effects, this line can be removed.
// Make sure enough results are loaded to maintain the scroll position.
if (this.page > 2) {
this.page = this.page - 1;
} else {
this.page = 1;
}
this.loading = true;
*/
this.page = 0;
// Flag results as dirty to force a refresh.
this.dirty = true;
this.search();
},
getPathAsString() {

15
frontend/src/page/people/new.vue
View File

@@ -535,14 +535,17 @@ export default {
return;
}
/*
TODO: Leaving "loading" untouched here avoids flickering when refreshing the results, which might lead to a
smoother experience. If it doesn't cause any problems or unwanted side effects, this line can be removed.
// Make sure enough results are loaded to maintain the scroll position.
if (this.page > 2) {
this.page = this.page - 1;
} else {
this.page = 1;
}
this.loading = true;
*/
this.page = 0;
// Flag results as dirty to force a refresh.
this.dirty = true;
// Enable infinite scrolling if it was disabled.
this.scrollDisabled = false;
this.loadMore();

17
frontend/src/page/people/recognized.vue
View File

@@ -678,18 +678,23 @@ export default {
refresh(props) {
this.updateSettings(props);
// Do not refresh results if the view is already loading
// or should not be listening for events.
if (this.loading || !this.active || !this.listen) {
return;
}
/*
TODO: Leaving "loading" untouched here avoids flickering when refreshing the results, which might lead to a
smoother experience. If it doesn't cause any problems or unwanted side effects, this line can be removed.
// Make sure enough results are loaded to maintain the scroll position.
if (this.page > 2) {
this.page = this.page - 1;
} else {
this.page = 1;
}
this.loading = true;
*/
this.page = 0;
// Flag results as dirty to force a refresh.
this.dirty = true;
// Enable infinite scrolling if it was disabled.
this.scrollDisabled = false;
this.loadMore();

17
frontend/src/page/photos.vue
View File

@@ -620,19 +620,24 @@ export default {
refresh(props) {
this.updateSettings(props);
// Do not refresh results if the view is already loading
// or should not be listening for events.
if (this.loading || !this.listen) {
return;
}
/*
TODO: Leaving "loading" untouched here avoids flickering when refreshing the results, which might lead to a
smoother experience. If it doesn't cause any problems or unwanted side effects, this line can be removed.
// Make sure enough results are loaded to maintain the scroll position.
if (this.page > 2) {
this.page = this.page - 1;
} else {
this.page = 1;
}
this.loading = true;
*/
this.page = 0;
// Flag results as dirty and incomplete to force a refresh.
this.dirty = true;
this.complete = false;
// Enable infinite scrolling if it was disabled.
this.scrollDisabled = false;
this.loadMore(true);