Page MenuHomePhabricator

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

Assigned To
Authored By
Sneha
Oct 28 2022, 8:08 PM
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

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)

Event Timeline

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

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

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

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

Change 869300 merged by jenkins-bot:

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

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

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 subscribed.

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
Loading Related images from commons

(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

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.

@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 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.