Adjust search loading indicator to avoid jumps
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Pginer-WMF
	Sep 6 2021, 9:43 PM

Description

After the initial adjustments for showing a loading indicator when searching for an article to translate (T282455) , search results are not cleared when showing the loading indicator.

This results in the search results to "jump" if the user types "almenara" character by character, for example:

Expected result. When typing, the old results can remain visible for up to a second. However, if the new results are not ready by then, the old results will be cleared and only the loading indicator will be visible until the new results arrive.

Details

Project	Branch	Lines +/-	Subject
mediawiki/extensions/ContentTranslation	master	+1 K -355	CX3 Build 0.1.0+20211018
mediawiki/extensions/ContentTranslation	master	+8 -6	SX article search: Show loading indicator as soon as the user types
mediawiki/extensions/ContentTranslation	master	+48 -7	Adjust search loading indicator to avoid jumps
mediawiki/extensions/ContentTranslation	master	+31 -3	SXArticleSearch: Fix loading indicator and search results issues

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	None	T243495 [Epic] Support for Section Translation
Open	None	T279064 Observations from first research study for Section Translation on Bengali Wikipedia
Open	None	T286641 Entry points to improve discoverability of Section Translation
Open	None	T241590 Section Translation: "New translation" entry point
Resolved	ngkountas	T290457 Adjust search loading indicator to avoid jumps

Event Timeline

Pginer-WMF triaged this task as Medium priority.Sep 6 2021, 9:43 PM

Pginer-WMF created this task.

Pginer-WMF moved this task from Quarter Backlog to Priority: SX Adoption on the Language-Team (Language-2021-July-September) board.

Pginer-WMF mentioned this in T282455: Loading indicator for search results.

Pginer-WMF renamed this task from Adjust search loading indicator to avoid jumps and misleading information to Adjust search loading indicator to avoid jumps.Sep 7 2021, 12:02 PM

Pginer-WMF updated the task description. (Show Details)

Pginer-WMF mentioned this in T287835: error message saying "no pages found" that shouldn't appear until we complete the search.

Change 719263 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SXArticleSearch: Fix loading indicator and search results issues

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

gerritbot added a project: Patch-For-Review.Sep 7 2021, 1:25 PM

ngkountas claimed this task.Sep 7 2021, 1:26 PM

ngkountas moved this task from Priority: SX Adoption to In Progress on the Language-Team (Language-2021-July-September) board.

ngkountas moved this task from In Progress to In Review on the Language-Team (Language-2021-July-September) board.

When typing, the old results can remain visible for up to a second. However, if the new results are not ready by then, the old results will be cleared and only the loading indicator will be visible until the new results arrive

Can this be simplified to common UX pattern? I am not in favor of making it complex and then having rough edges of implmentation show up. Secondly, this component should be able to be replaced by a standard generic component coming from a UI library(wvui or new one) and we should not end up overriding it a lot.

Let the user type, fire the search api only in a debounced manner. That is, when there is x second delay after last keystroke
If search api is going on, show loading indicator and clear current results.

The current implementation at https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ContentTranslation/+/719263/1/app/src/components/SXArticleSearch/useArticleSearch.js#22 adds more complexity and even leaves disclaimer about race conditions.

For references, see typeahead search component implementation in WVUI that is used for the new search feature in wikipedia. It does not even have the loading indicator.

In T290457#7341098, @santhosh wrote:

When typing, the old results can remain visible for up to a second. However, if the new results are not ready by then, the old results will be cleared and only the loading indicator will be visible until the new results arrive

Can this be simplified to common UX pattern? I am not in favor of making it complex and then having rough edges of implmentation show up. Secondly, this component should be able to be replaced by a standard generic component coming from a UI library(wvui or new one) and we should not end up overriding it a lot.

Let the user type, fire the search api only in a debounced manner. That is, when there is x second delay after last keystroke

If search api is going on, show loading indicator and clear current results.

The current implementation at https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ContentTranslation/+/719263/1/app/src/components/SXArticleSearch/useArticleSearch.js#22 adds more complexity and even leaves disclaimer about race conditions.

For references, see typeahead search component implementation in WVUI that is used for the new search feature in wikipedia. It does not even have the loading indicator.

That seems a valid approximation for the requirement. If it is simper technically and more solid, let's go with it.
I tried the typeahead search component at Bengali Wikipedia and it works quite well without jumps. If we can achieve a similar result that should be perfect.

ngkountas moved this task from In Review to In Progress on the Language-Team (Language-2021-July-September) board.Sep 10 2021, 4:59 PM

Change 721479 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] Adjust search loading indicator to avoid jumps

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

Change 719263 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SXArticleSearch: Fix loading indicator and search results issues

Reason:

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

Change 721479 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Adjust search loading indicator to avoid jumps

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

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.1; 2021-09-21).Sep 20 2021, 11:00 AM