Closed Bug 755395 Opened 10 years ago Closed 10 months ago

Tabs list should indicate which tabs are still loading

Categories

(Firefox for Android Graveyard :: General, defect, P2)

defect

Tracking

(Not tracked)

RESOLVED INCOMPLETE

People

(Reporter: wesj, Unassigned)

References

Details

Attachments

(3 files)

I often open a bunch of stories from nyt at once. Then I open the tabs list and start reading them. It would be nice if there was some visual indication there which stories had finished loading.

Tab thumbnail helps with this somewhat, but something more throbberish (although that's going away...) seems more clear and informative.
I've started working on this, I'm just not sure what the best way of displaying progress is though. Based on the discussion in bug 1066251 (the equivalent bug for the tab strip) I've decided to go with a simple progress bar for now. I think this looks OK, but it does take up additional vertical space. (Screenshot is attached.)

I've been thinking it might be worth instead painting the progress bar at the top of the thumbnail (i.e. similarly to how the progress bar is painted at the top of the current page when loading) - however this didn't look particularly nice when I painted a prototype.
Here's what having the ProgressBar as part of the thumbnail could look like. (I personally find this a lot harder to see / user.)
(Also attached a draft patch in case anyone wants to have a look at the code)
Duplicate of this bug: 926130
That's cool! :)

NI-ing antlam for some UX feedback and mhaigh who is also working on the tabs tray (just so that you don't get in each others way)
Assignee: nobody → andrzej
Flags: needinfo?(mhaigh)
Flags: needinfo?(alam)
Accidentally cleared my NI.
Flags: needinfo?(mhaigh) → needinfo?(alam)
This seems like its going to be a more visible issue soon with features like "Send tab to device" and "Open in background/ Tab queues".

Knowing our concerns around adding animations here, I tried to use something we looked at for Search Activity. That is, utilizing grey box "placeholders" as a visual indicators of "something will be here soon". 

I've posted a mock here: https://invis.io/ZK4LU548P if you'd like to click through to see a rough idea of how I have this working in my head.

If we have time, I'd like to see if we can experiment with this. The idea here is that in the "spinning" state, we show the grey boxes, but fade in the title, tab preview, and 'x' icon as we get them. Yes, the user can still swipe to dismiss these before they're loaded.

Thoughts?
Flags: needinfo?(s.kaspari)
Flags: needinfo?(andrzej)
Flags: needinfo?(alam)
(In reply to Anthony Lam (:antlam) from comment #7)
> This seems like its going to be a more visible issue soon with features like
> "Send tab to device" and "Open in background/ Tab queues".
> 
> Knowing our concerns around adding animations here, I tried to use something
> we looked at for Search Activity. That is, utilizing grey box "placeholders"
> as a visual indicators of "something will be here soon". 
> 
> I've posted a mock here: https://invis.io/ZK4LU548P if you'd like to click
> through to see a rough idea of how I have this working in my head.
> 
> If we have time, I'd like to see if we can experiment with this. The idea
> here is that in the "spinning" state, we show the grey boxes, but fade in
> the title, tab preview, and 'x' icon as we get them. Yes, the user can still
> swipe to dismiss these before they're loaded.
> 
> Thoughts?

I worry that this would be a lot of effort to implement, and I'm not sure it's worth it. Also, we at least know the URL that's going to load in a tab, and I think that's more useful than showing a title placeholder, in case the user wants to switch to that tab before it's done loading.
(In reply to Anthony Lam (:antlam) from comment #7)
> Thoughts?

I like that it is static and has no animation (performance). It's also not intrusive. Using the URL as title is definitely a good idea for selecting/swiping away before the tab is loaded. And to cement the idea of "This is a tab. It's just not ready".

Another option would be to play with a static throbber icon (no animation). It still transports the message of "loading" but maybe it looks like something is frozen.
Flags: needinfo?(s.kaspari)
(In reply to :Margaret Leibovic from comment #8)
> I worry that this would be a lot of effort to implement, and I'm not sure
> it's worth it. Also, we at least know the URL that's going to load in a tab,
> and I think that's more useful than showing a title placeholder, in case the
> user wants to switch to that tab before it's done loading.

Yes that's my plan too! My bad, I should've been more clear. 

If we have the Title, we can fade that in first. But the idea here is to have something in place ASAP. The rest can fade in as we get it. 

The problem I see now is two-fold:
1) There's no "loading" or "hey I'm working" indicator when a user is in the tabs tray, So, I often find myself sitting in the Tabs tray just waiting for my tabs to "crash in" abruptly.

2) There's no indicator on the individual tabs that they're "loading" or "not ready" once they do "crash in". So, they look as though they're frozen, or worse.
I recently came across a nice article about the successful use of these "skeleton screens" [1], I think it's still worth doing since we do come across this more often now with a feature like Tab queue in release.

[1] http://www.lukew.com/ff/entry.asp?1797
Unassigning since I'm unlikely to get to this anytime or soon.
Assignee: ahunt → nobody
Flags: needinfo?(ahunt)
Setting importance to P1 per inputs from Taipei UX folks
Priority: -- → P1
Priority: P1 → P2
We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.
Status: NEW → RESOLVED
Closed: 10 months ago
Resolution: --- → INCOMPLETE
Product: Firefox for Android → Firefox for Android Graveyard
You need to log in before you can comment on or make changes to this bug.