Page MenuHomePhabricator
Create Task
Maniphest T329241

[L] Improve the opening and closing of search previews on Mobile
Closed, ResolvedPublic
Actions

Assigned To
SimoneThisDot
Authored By
Sneha
Feb 8 2023, 10:32 PM
Tags
Referenced Files
F36975763: beta mobile_animation_no img3.gif
May 4 2023, 7:24 PM
F36975726: mobile_animation_no preview3.gif
May 4 2023, 7:24 PM
F36975768: beta mobile_animation_no img4.gif
May 4 2023, 7:24 PM
F36975721: mobile_animation_no lead img3.gif
May 4 2023, 7:24 PM
F36975756: beta mobile_animation_lead img4.gif
May 4 2023, 7:24 PM
F36975716: mobile_animation_lead img3.gif
May 4 2023, 7:24 PM
Subscribers
Aklapper
Etonkovidova
Sneha

Description

This ticket is to improve the opening and closing behaviour/animations for search preview to:

  • reduce too much movement of content on screen
  • reduce the perceived load time of the content

Doing so will not only improve loading experience but also help us decide if we should pursue with opening multiple previews or not in T321590

Things to improve:

Opening preview

  • Show search preview loading skeleton (as prescribed in this ticket T321944) or the content if it is already available, right away instead of top-down animation that we currently have.
    • Mobile preview loading should follow similar patterns as the desktop preview box which appears without animation and shows skeletons for additional content loading.
      • In addition it would be good if the skeleton/content fades in.
  • Open to full height immediately with content skeleton.
    • This is with the assumptions that most top results will have preview.
      • Minimize the preview to show the current "no preview" message if the preview does not exist.

Closing preview

  • Hide the preview right away (instead of bottom up animation) and then slide the page content up.
    • In addition it would be good if the skeleton/content fades out.
  • While closing the preview could we use the ease-in effect to slide up the content.

Details

SubjectRepoBranchLines +/-
Improve the opening and closing of search previews on Mobilemediawiki/extensions/SearchVuemaster+117 -191
Customize query in gerrit

Related Objects

Event Timeline

Sneha created this task.Feb 8 2023, 10:32 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 8 2023, 10:32 PM
Sneha added a project: SDAW-Search-Improvements.Feb 8 2023, 10:33 PM
Sneha updated the task description. (Show Details)
Sneha updated the task description. (Show Details)Feb 8 2023, 10:49 PM
CBogen moved this task from Needs Design to Ready for Estimation on the Structured-Data-Backlog (Current Work) board.Feb 27 2023, 5:24 PM
Sneha mentioned this in T321590: Mobile: Allow users to open multiple search previews.Feb 27 2023, 7:50 PM
CBogen renamed this task from Improve the opening and closing of search previews on Mobile to [L] Improve the opening and closing of search previews on Mobile .Mar 8 2023, 6:00 PM
CBogen moved this task from Ready for Estimation to Ready for Development on the Structured-Data-Backlog (Current Work) board.
SimoneThisDot moved this task from Ready for Development to Doing on the Structured-Data-Backlog (Current Work) board.Mar 24 2023, 10:14 AM
CBogen assigned this task to SimoneThisDot.Mar 27 2023, 4:18 PM
gerritbot added a comment.Mar 30 2023, 12:39 PM

Change 904523 had a related patch set uploaded (by Simone Cuomo; author: Simone Cuomo):

[mediawiki/extensions/SearchVue@master] Improve the opening and closing of search previews on Mobile

https://gerrit.wikimedia.org/r/904523

gerritbot added a project: Patch-For-Review.Mar 30 2023, 12:39 PM
SimoneThisDot moved this task from Doing to Code Review on the Structured-Data-Backlog (Current Work) board.Mar 31 2023, 11:23 AM
gerritbot added a comment.Apr 28 2023, 12:32 PM

Change 904523 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Improve the opening and closing of search previews on Mobile

https://gerrit.wikimedia.org/r/904523

SimoneThisDot mentioned this in rESVU47b1e5f23d87: Improve the opening and closing of search previews on Mobile.Apr 28 2023, 12:35 PM
Maintenance_bot removed a project: Patch-For-Review.Apr 28 2023, 1:10 PM
Etonkovidova subscribed.EditedMay 4 2023, 7:24 PM

@Sneha - the case when there is no content to preview (listed below as a no content to preview case) - the skeleton is still shown while loading. Is it ok
betalabs search=mavetuna&quickView=Mavetuna+70+4.
You may compare it with the following search idwiki search=Gabut&quickView=Gabut. The behavior for the no content to preview case is still the same between production and betalabs.

The transition is in the current production (wmf.6/7 with network throttling).

idwiki wmf.7betalabs
lead img/related img are present
mobile_animation_lead img3.gif (685×385 px, 479 KB)
beta mobile_animation_lead img4.gif (685×385 px, 640 KB)
no lead img
mobile_animation_no lead img3.gif (685×385 px, 92 KB)
beta mobile_animation_no img4.gif (685×385 px, 116 KB)
no content to preview
mobile_animation_no preview3.gif (685×385 px, 81 KB)
beta mobile_animation_no img3.gif (685×385 px, 107 KB)
Sneha added a comment.May 5 2023, 3:17 PM

@Etonkovidova we replaced the previous "spinner" loading indicator with skeletons so that is why the skeleton is showing in all cases. I assume we would not know if the preview exists or not until we load it. If that is true it is okay to see the skeleton first. But if that is not true and we know beforehand we could show the "No content to preview" message right away. But I am guessing the former is true. @SimoneThisDot can confirm.

Etonkovidova added a comment.May 5 2023, 7:06 PM
In T329241#8829760, @Sneha wrote:

@Etonkovidova we replaced the previous "spinner" loading indicator with skeletons so that is why the skeleton is showing in all cases. I assume we would not know if the preview exists or not until we load it. If that is true it is okay to see the skeleton first. But if that is not true and we know beforehand we could show the "No content to preview" message right away. But I am guessing the former is true. @SimoneThisDot can confirm.

Thank you, @Sneha! I agree - the case with "no content to preview" is rather minor. I've updated my comment with mentioning that gifs were done with net throttling. With normal network connectivity, all cases look smooth and issues-free.

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.9; 2023-05-15).May 16 2023, 1:01 AM
SimoneThisDot added a comment.May 29 2023, 7:29 AM

Am I correct to assume that this is ok to move forward or would you like me to do any followup action on this task?

Etonkovidova updated the task description. (Show Details)Jun 14 2023, 1:16 PM
Etonkovidova closed this task as Resolved.Jun 14 2023, 1:21 PM
In T329241#8885942, @SimoneThisDot wrote:

Am I correct to assume that this is ok to move forward or would you like me to do any followup action on this task?

I ew-checked in wmf.11 - all works as per specs; the gifs in https://phabricator.wikimedia.org/T329241#8827962 match the current production behavior.

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits