Page MenuHomePhabricator
Create Task
Maniphest T321944

[L] Mobile: Loading indicator for search preview
Closed, ResolvedPublic
Actions

Assigned To
SimoneThisDot
Authored By
Sneha
Oct 28 2022, 8:08 PM
Tags
Referenced Files
F36174926: Screen Shot 2023-01-12 at 3.32.09 PM.png
Jan 12 2023, 11:56 PM
F36174911: Screen Shot 2023-01-12 at 3.10.56 PM.png
Jan 12 2023, 11:56 PM
F36174909: Screen Shot 2023-01-12 at 3.10.47 PM.png
Jan 12 2023, 11:56 PM
F36174975: related_images_loading.mov
Jan 12 2023, 11:56 PM
F36174948: lead image_load.mov
Jan 12 2023, 11:56 PM
F35848094: Special_Search (14).png
Dec 9 2022, 5:17 PM
F35848092: Special_Search (13).png
Dec 9 2022, 5:17 PM
F35693278: Special_Search (66).png
Nov 1 2022, 9:42 PM
View All 13 Files
Subscribers
Aklapper
Etonkovidova
Sneha

Description

The goal of this ticket is to define how we want to load content in the search preview on mobile so that there is a visual indication that the content is loading.

The desktop preview loading is covered in T318951 and some of the desktop concept will also be applied to mobile with a few differences.

Notes on interaction

  • Show the loading indicator in the beginning when we are still fetching information on whether the article has image or not. Specs in Figma

Special_Search (13).png (800×360 px, 58 KB)

  • When we are fetching information on whether the content for next card exist or not, show the loading icon after the card. Specs in Figma

Special_Search (62).png (800×360 px, 46 KB)

  • Each skeleton will have the animation until the content is loaded in that card.
  • Load content in the order of the cards.
    Special_Search (65).png (800×360 px, 76 KB)
  • The following cards in the preview will have the skeleton.
    • The size of the article image skeleton box will be the dimension of the image.
    • The size of the wikidata skeleton box will be the size of the wikidata card which is predefined.Specs in Figma
      Special_Search (63).png (800×360 px, 46 KB)
    • Images from commons will have skeleton boxes as per image dimensions. Specs in Figma
      Special_Search (64).png (800×360 px, 48 KB)
  • Show the skeleton cards only when we know that information exists. Show them as soon as we know the information for that card exists.
  • The loading icon disappears once all the cards/skeletons are loaded.
  • If there is no content, show the message as shown in the image below. Specs in Figma. This is a back up plan if we the AC in T320528 is not feasible: "Do not show arrow for the results that have no quick view.)information."

Special_Search (14).png (800×360 px, 58 KB)

Details

ProjectBranchLines +/-Subject
mediawiki/extensions/SearchVuemaster+461 -234Mobile: Loading indicator for search preview
Customize query in gerrit

Related Objects

Event Timeline

Sneha created this task.Oct 28 2022, 8:08 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 28 2022, 8:08 PM
Sneha updated the task description. (Show Details)Nov 1 2022, 9:42 PM
Sneha moved this task from Needs Design to Ready for Estimation on the Structured-Data-Backlog (Current Work) board.Nov 2 2022, 1:51 PM
MarkTraceur renamed this task from Mobile: Loading indicator for search preview to [L] Mobile: Loading indicator for search preview.Nov 16 2022, 5:43 PM
MarkTraceur moved this task from Ready for Estimation to Ready for Development on the Structured-Data-Backlog (Current Work) board.
SimoneThisDot claimed this task.Dec 2 2022, 11:45 AM
Sneha updated the task description. (Show Details)Dec 9 2022, 5:17 PM

@SimoneThisDot I have updated two images, based on our conversation about reducing the spacing for loading and no content found message.

SimoneThisDot moved this task from Ready for Development to Doing on the Structured-Data-Backlog (Current Work) board.Dec 12 2022, 11:43 AM
gerritbot added a comment.Dec 19 2022, 8:48 PM

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

[mediawiki/extensions/SearchVue@master] Mobile: Loading indicator for search preview

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

gerritbot added a project: Patch-For-Review.Dec 19 2022, 8:48 PM
SimoneThisDot moved this task from Doing to Blocked on the Structured-Data-Backlog (Current Work) board.Jan 3 2023, 8:15 PM

Awaiting the current version to go live before merging this in, as it includes lots of changes and would be too risky close to the deployment

gerritbot added a comment.Jan 12 2023, 8:02 AM

Change 869300 merged by jenkins-bot:

[mediawiki/extensions/SearchVue@master] Mobile: Loading indicator for search preview

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

matthiasmullie mentioned this in rESVU64c381f9b46c: Mobile: Loading indicator for search preview.Jan 12 2023, 8:04 AM
Maintenance_bot removed a project: Patch-For-Review.Jan 12 2023, 8:30 AM
SimoneThisDot moved this task from Blocked to Needs QA on the Structured-Data-Backlog (Current Work) board.Jan 12 2023, 12:07 PM

This task was a big refactoring of the code structure and should be result in a full test of both mobile and Desktop searchVue

Etonkovidova moved this task from Needs QA to Design QA on the Structured-Data-Backlog (Current Work) board.Jan 12 2023, 11:56 PM
Etonkovidova added a subscriber: Etonkovidova.

For @Sneha review

(1) I was not able to see the skeletons for article's description, article's sections and for Related images. An article's description and article's sections appear as soon as the loading indicator disappear - see the short video below:

Loading a leading image in the preview card
lead image_load.mov3 MBDownload
Loading Related images from commons
related_images_loading.mov1 MBDownload

(2)
Mobile

no content to previewpreview is present
Screen Shot 2023-01-12 at 3.10.47 PM.png (990×766 px, 329 KB)
Screen Shot 2023-01-12 at 3.10.56 PM.png (810×798 px, 139 KB)
Screen Shot 2023-01-12 at 3.32.09 PM.png (890×788 px, 101 KB)

(3) I re-checked Desktop loading indicator, as per @SimoneThisDot comment that there was a big refactoring of the code - no regression issues were found.

Etonkovidova updated the task description. (Show Details)Jan 13 2023, 12:01 AM
Sneha added a comment.Jan 13 2023, 3:34 PM

@Etonkovidova

All looks good to me. The skeletons that you are not seeing where supposed to be interim state i.e. the state between loading indicator and final load of content. That interim state was there to make loading feel less lengthy. However, it would only appear if there was enough time between us knowing context exist and content fully loading. I am not sure how you would be able to test that if such a state exists.

Sneha moved this task from Design QA to Needs QA on the Structured-Data-Backlog (Current Work) board.Jan 13 2023, 3:35 PM
Etonkovidova moved this task from Needs QA to Verify on Production on the Structured-Data-Backlog (Current Work) board.Jan 13 2023, 6:02 PM
In T321944#8523940, @Sneha wrote:

@Etonkovidova

All looks good to me. The skeletons that you are not seeing where supposed to be interim state i.e. the state between loading indicator and final load of content. That interim state was there to make loading feel less lengthy. However, it would only appear if there was enough time between us knowing context exist and content fully loading. I am not sure how you would be able to test that if such a state exists.

Thanks, @Sneha! Moving to Verify on Production.

Etonkovidova closed this task as Resolved.Feb 3 2023, 11:25 PM
Etonkovidova updated the task description. (Show Details)

Checked in wmf.21 - with network throttling it was possible to see more loading indicators/skeletons in production than in betacluster.

SimoneThisDot mentioned this in T328716: [S] Mobile search Preview not shown for articles with existing desktop search preview.Feb 8 2023, 10:34 AM
Sneha mentioned this in T329241: [L] Improve the opening and closing of search previews on Mobile .Feb 8 2023, 10:32 PM
Content licensed under Creative Commons Attribution-ShareAlike 3.0 (CC-BY-SA) unless otherwise noted; code licensed under GNU General Public License (GPL) or 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