It's great Shahyar has got the TOC in a state where we can see jumping down
working. Try it at
http://flow-tests.wmflabs.org/wiki/Talk:Sandbox (please
don't add or hide/delete topics to this, it's crafted specially to test
TOC. You can experiment on Talk:Flow_QA or your own user_talk page.)
If you click on e.g. topic 73 it works strangely (try it and see). We think
Flow is trying to load topic 73 but it's at the bottom of the page which
triggers loading topics 11-20, and then the view jumps around as topics
show up.
We knew this would be hard to get right. Danny and I explored some use
cases.
1. You click on topic 73 and there's a gap above it.
* TOC requests that topic and some topics around it (e.g. N-3 through N+7)
* TOC disappears
* Flow shows a Loading more animation at the bottom of the page and
positions the view at it.
* When the topics show up, Flow positions topic 73 just below the fixed
header as usual.
While this is in progress, we need to disable the usual bottom of page Load
more behavior -- don't try to load 11-20. There should only be one load
going on at the very bottom of the page.
(Note ErikB doesn't think there's a performance win in asking for only
topic 73 then making separate API requests for topics 69-72, etc. Nor is it
easy to provide a variable response "Give me enough topics to fill four
[PageUp] operations from topic 73")
When Flow adds topics 70-77 to the page I think we need a "gap indicator"
at the top of them to indicate there is a gap but Flow isn't yet trying to
load stuff to fill it. On a fast computer and connection the user might
never see this.
2. You scroll up from topic 73
Because Flow has loaded some topics above 73, you can scroll up into
content above, preserving the illusion of perfect scroll. As you get closer
to the gap (topics 11-69), Flow tries to fill in the gap to preserve the
illusion of a complete page. When scrolling up into a gap Flow should
always load bottom-up, i.e. it requests topics 60-69. The dormant "gap
indicator" turns into the active Loading more animation
The problem is, while this is going on the user can scroll around past the
gap indicator/Loading more animation. Quiddity and I think that's fine and
Flow should let the user freely move around in the browser window; Danny
would like to stop the user scrolling past the gap -- "You wanted to scroll
up to some topics above, Flow is loading them, sit tight."
3. You scroll away from a loading more gap.
In either 1 or 2, you can scroll away from the gap in at least one
direction, or you can open the TOC and jump somewhere else altogether. When
the API request returns the topics intended for the gap, Flow inserts them.
Question: do we reposition the view? Yes for the click in the TOC, but
unclear for scrolling around. I'm not sure what the default browser
behavior is if you insert a bunch of content in the DOM above what the user
is viewing.
4. You scroll back into the gap
After loading topic 73 and scrolling up a bit, say you jump to top of page,
then scroll back down towards topic 10. Flow is still filling the 11-69
gap with topics 60-69. Now you're scrolling down into the gap, you probably
want the usual Load more behavior, so Flow should request topics 11-20.
* Should there be two loading indicators in the gap? I think so, a gap may
be being filled from the bottom and from the top at once.
Furthermore, you aren't near the bottom of the view because topics 70-77
are there, so if you're holding down the space bar or scrolling in order to
force loading more topics, it won't work. You'll scroll right past the gap
and into the topics lower down. I think this is OK, you're probably back on
a quest to get to the "end" of the board.
5. Now you bring up the TOC and click topic 49
Like step 1 above so
* TOC requests that topic and some topics around it (e.g. 46 through 56)
* TOC disappears
* Flow shows a Loading more animation ...
where? The one gap is loading topics 60-69 from step 2 and 11-20 from step
4, now it's loading a third group!
I'm sure there are further use cases and challenges. Next step is probably
for Matt, Shahyar, Pau, Danny, to explore this with other interested
parties.
Some design approaches we aren't pursuing:
* Detailed "68 missing topics", "load/loading 10 above" messages or
controls -- Flow only shows the Loading more animation in the gap.
* Flow knows the topic titles in the gaps from the TOC, but it doesn't
show them -- Flow only shows the Loading more animation.
* Flow doesn't communicate the size of the gap. unlike e.g. a PDF viewer it
doesn't know how tall topics are. It just places a Loading more animation
in the gap.
--
=S Page Features engineer