UX: Reduce flickering when refreshing search results #2290

Open
opened 2026-02-20 01:09:15 -05:00 by deekerman · 0 comments
Owner

Originally created by @lastzero on GitHub (Apr 1, 2025).

Originally assigned to: @graciousgrey, @omerdduran on GitHub.

Leaving this.loading untouched in the frontend components that display search results avoids flickering when results are refreshed, which would lead to a smoother experience.

If it doesn't cause any problems or unwanted side effects, the line can be removed in the next step:

refresh(props) {
  this.updateSettings(props);

  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.

  this.loading = true;
  */
  this.page = 0;
  this.dirty = true;
  this.complete = false;
  this.scrollDisabled = false;

  this.loadMore(true);
},

For now, we'll leave it commented out in page/photos.vue and similar search result pages like labels.vue and albums.vue.

Originally created by @lastzero on GitHub (Apr 1, 2025). Originally assigned to: @graciousgrey, @omerdduran on GitHub. **Leaving `this.loading` untouched in the frontend components that display search results avoids flickering when results are refreshed, which would lead to a smoother experience.** If it doesn't cause any problems or unwanted side effects, the line can be removed in the next step: ```js refresh(props) { this.updateSettings(props); 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. this.loading = true; */ this.page = 0; this.dirty = true; this.complete = false; this.scrollDisabled = false; this.loadMore(true); }, ``` For now, we'll leave it commented out in `page/photos.vue` and similar search result pages like `labels.vue` and `albums.vue`.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/photoprism#2290
No description provided.