search

mozilla / addons

☂ Umbrella repository for Mozilla Addons ✨
Other
127 stars 41 forks source link

Implement a nice search result loading placeholder component #9904

Closed tofumatt closed 7 years ago

tofumatt commented 8 years ago

Instead of showing "Searching..." while we request and load more search results, we should show at least a spinner, but I think it'd be quite nice if we took a page out of the kind of wireframe-with-no-content loading screens on things like Facebook. The search result styles are consistent, so a nice animation with their boxes would make the loading screen possibly feel faster, if I'm making any sense.

muffinresearch commented 8 years ago

One of the things that was mentioned at Fronteers was an experiment that Viget carried out [1] that customised loading indicators tend to have a better perception than generic ones. It's worth noting the sample data was pretty small but it's an interesting idea in any case.

[1] https://www.viget.com/articles/experiments-in-loading-how-long-will-you-wait

tofumatt commented 8 years ago

That makes sense. I was actually thinking that'd I'd love if we used the add-on fox logo animating in a way for a loading graphic, paging @pwalm for thoughts.

I saw some UX talks and read posts about using skeleton layouts increased perceived load times even when they're the same. Can't cite sources though, so you win 😉

pwalm commented 7 years ago

The icon could start out diagonally (so it looks like a fox), spin around twice really quickly and end up back at its original starting point. It would pause for .5 secs and then start again.

Similar to the "Follow through and overlapping" animation style in this video (0:59). Not moving side to side like the animation shown, but spinning with a bit of a wobble at the end, like it's being stopped by something.

pwalm commented 7 years ago

Oh and icon would be 48x48px and #ced4da

Ryuno-Ki commented 7 years ago

I can imagine you've read an article on SitePoint on how to speed up UX with Skeleton Screens.

https://github.com/ksux/ks-design-guide/issues/38 researched some more links.

I even found a CodePen for it.

ValentinaPC commented 7 years ago

Verified as fixed on AMO-dev (Android 6.0.1) A placeholder was added while navigating through AMO mobile. Postfix video: videotogif_2017 03 06_11 06 45

ValentinaPC commented 7 years ago

The placeholder is no longer present after entering a search term or navigating through search results. @tofumatt : do you know something about this?

Please see video from AMO-prod FF53 (Android 6.0.1) videotogif_2017 05 12_12 12 42

tofumatt commented 7 years ago

We've moved to a loading bar and removed the placeholder. In the future we'll actually have a better loading indicator similar to:

may-05-2017 14-40-30

But yes for now it missing I think is intended.