@Volker_E @RHo looking at this again I'm wondering if option B feels better (the loading indicator fills the space where the thumbnails eventually sit, and the text is aligned with the search text). Original discussion is here if you want to refresh: T254695

In T273093#6781393, @alexhollender wrote:

@Volker_E @RHo looking at this again I'm wondering if option B feels better (the loading indicator fills the space where the thumbnails eventually sit, and the text is aligned with the search text). Original discussion is here if you want to refresh: T254695

Hey @alexhollender – agree. I like the simplicity and "tidiness" of the spinning circle loading indicator.

Revisiting the argument and image you put forward in this comment about showing more of the loading state of the results:
>>! In T254695#6227954, @alexhollender wrote:

@Niedzielski thanks for raising this question. I admittedly know very little about search currently (in terms of user behavior, how we measure success, and technical capabilities) however I hope to learn more in the coming weeks. My initial question is: do we believe that people will have a better search experience if they wait for the results list to populate? If the answer is yes I think the next question is: how long is it worth waiting for the results list to populate (versus just submitting a "blind" search)? I believe that the design of the loading state has the ability to influence how long a person waits. Here are three initial sketches:

I definitely prefer your placement of the indeterminate progress loading bar below the "search results are loading" text in this earlier mock, as right now the bar showing under "Orang" is imho making it a bit ambiguous whether the query is still being processed versus there being a wait as results are being loaded.
This early design is based on the image thumb being on the left though, and the spinning circle loader works better with the left thumbnail placement.

add loading indicator/animation

This could probably do with a little expansion in the description

Other than that this looks ready for estimation.

I also prefer the placement of the loading bar underneath the loading statement label (which should have an ellipsis by the way and put verb in front: “Loading search results…”)
Not convinced about option B for two reasons:

• We have different versions of the component in production in future, also including ones, that don't feature thumbnails. How would those latest designs work with B?
• The loading circle is a non-standard loading indicator. The bouncing dots would not fit in this context, nonetheless, I'd lean towards the loading bar instead of the, new and somewhat unfitting overall look & feel of the circle.

after further discussion off-task we've decided to stick with the loading bar option. The mocks in the description are correct.

@Jdlrobson @nray do/can we support a subsequent loading state? For example:

• person types "Orange"
• results are being fetched (slow connection)
• initial loading state appears
• results appear, initial loading state disappears
• person modifies their query (e.g. they add "juice" after "Orange")
• new results are being fetched (slow connection)
• subsequent loading state appears?

see demo for an example: https://di-searchland-2.web.app/

Change 685552 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] search: Update styling for the search loading state

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

@alexhollender Do you have a preference for the spacing when thumbnails are disabled, aka when the icon doesn't expand?

When thumbnails are enabled, we set the left padding to 24px to aligned with the search icon: https://jmp.sh/IipqpMN
But here's what the loader looks like with 24px when thumbnails are disabled: https://jmp.sh/xhGg2uq
Alternatively, we could set the left padding to 36px when thumbnails are disabled to align with the input: https://jmp.sh/bcD2UFw

In T273093#7066464, @bwang wrote:

@alexhollender Do you have a preference for the spacing when thumbnails are disabled, aka when the icon doesn't expand?

When thumbnails are enabled, we set the left padding to 24px to aligned with the search icon: https://jmp.sh/IipqpMN
But here's what the loader looks like with 24px when thumbnails are disabled: https://jmp.sh/xhGg2uq
Alternatively, we could set the left padding to 36px when thumbnails are disabled to align with the input: https://jmp.sh/bcD2UFw

thanks so much for the clarity and options here — the 36px padding option looks great

@alexhollender I went ahead and made a spike ticket to get started on the sign off criteria, please feel free to edit it! https://phabricator.wikimedia.org/T282480

Change 685552 merged by jenkins-bot:

[mediawiki/skins/Vector@master] search: Update styling for the search loading state

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

Test Result - Patchdemo

Status: ✅ PASS
Environment: Patchdemo
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Steps per T273093#6974218

1. person types "Orange"
2. results are being fetched (slow connection)
3. ✅ AC1: initial loading state appears
4. ✅ AC2: results appear, initial loading state disappears
5. person modifies their query (e.g. they add "juice" after "Orange")
6. ✅ AC3: new results are being fetched (slow connection)
7. ✅ AC4: subsequent loading state appears?

I think it would make sense for this to pass through design review. Where can it be tested @bwang?

here are the steps I followed:

• open the developer tools & enable slow 3G
• go to a page on Wikipedia.org
• type in the search box as soon as it appears

in these three attempts (screen recordings linked below) Vue loads ~14 seconds after the first character is typed into the search box, but I am not seeing the loading state at all?

screen recordings: https://imgur.com/a/Bf9h82H

@alexhollender @bwang is this in prod yet? I still don't see it.

In T273093#7134485, @Edtadros wrote:

@alexhollender @bwang is this in prod yet? I still don't see it.

No train last week - should be out this Thursday

In T273093#7143055, @Jdlrobson wrote:

Please test on beta cluster and move to QA.

I am unable to design review this. I throttled my connection to "Slow 3G" but Vue is still loading fast enough that I don't see the loading state. How else can I review this? cc @bwang

@alexhollender I made this patchdemo that adds an additional 5 second delay. Let me know if this works for review!
https://patchdemo.wmflabs.org/wikis/3a8e8101b1/wiki/Main_Page?useskinversion=2

In T273093#7170120, @bwang wrote:

@alexhollender I made this patchdemo that adds an additional 5 second delay. Let me know if this works for review!
https://patchdemo.wmflabs.org/wikis/3a8e8101b1/wiki/Main_Page?useskinversion=2

Thanks so much for setting this up. It looks great. Two things:

• (As discussed offline) regarding the delay between when the loading box first appears, and when the blue animated loading bar appears: @Jdrewniak what was your thinking behind the 1second delay there? Is that in case the loading message only shows briefly and you wanted to reduce the amount of flickering elements? Wondering if there should be no delay, or a shorter delay.

• Is there a way to see the transition between the loading state and the search results appearing? In the patch demo once the loading state disappears nothing seems to happen

Thanks again and sorry that this is so difficult to review. We (as a team) don't have much practice with loading state stuff.

Change 701441 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Update search loading animation delay to 500ms

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

Change 701441 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update search loading animation delay to 500ms

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

Testable on beta cluster shortly.

In T273093#7246733, @Edtadros wrote:

@alexhollender This is what I'm seeing in beta. Doesn't look like what you saw. Do I need to enable anything?

yea this is tricky to test. unless @bwang has any new ideas for how we might reliably test in beta or production I think we can move this to signoff.

I found it helpful to test with low or mid level throttling, and then waiting for the entire page to load first before typing into the search bar. https://jmp.sh/MOMIRwd
Oddly enough when you type into the search bar immediately the loading state gets skipped, might have to do with the loading state JS not being loaded yet.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Steps per T273093#6974218

1. person types "Orange"
2. results are being fetched (slow connection)
3. ✅ AC1: initial loading state appears
4. ✅ AC2: results appear, initial loading state disappears
5. person modifies their query (e.g. they add "juice" after "Orange")
6. ✅ AC3: new results are being fetched (slow connection)
7. ✅ AC4: subsequent loading state appears?