Discussion list infinite scrolling + loading placeholders

[tobyzerner]

We have nice visual placeholders for posts that are loading... we should have them in the discussion list too!

[franzliedke]

I've been wondering whether loading automatically when scrolling down could be enabled somehow... any thoughts?

[tobyzerner]

Yeah, absolutely!

[tobyzerner]

Autoload on scroll might now be a good idea... see https://github.com/flarum/core-private/commit/28578e9d87588bafd4c08141d8840ff44391e276

And without the autoload on scroll, probably not much point in having the visual placeholders.

[tobyzerner]

Reopening, I'd like to revisit this.

To summarize the issue: we want to have infinite scrolling on the discussion list (so you don't have to click the "load more" button), but if we do then the footer ("Powered by Flarum" + forum statistics in the future) becomes inaccessible.

Possible solutions:

• Put "Powered by Flarum" at the bottom of the sidebar, as well as an "About This Forum" link which goes to an extensible page containing the forum description, rules, statistics, a list of mods, etc.
• Any other ideas?

[jberlyn]

Floating footer?

[tobyzerner]

Vertical screen real estate is a valuable commodity, we probably want to avoid having any more fixed elements.

[jberlyn]

Honestly, besides a Powered by Flarum tag, I can't really see much of a need for the footer. Facebook has the footer on the right hand side under the feed/advertisements. You could just have it situated under the sidebar.

[tobyzerner]

Yeah I think that's the way to go.

[franzliedke]

Agreed. I think we don't really need the statistics on the homepage.

[SolidOrphan]

A lot of websites with infinite loading like Twitter put it on the sidebar, it's a good idea !

[amdad]

Beta coming out soon. This issue still remain open :)

[tobyzerner]

Now that we've eliminated the footer, we can safely implement this.

What needs to be done:

• In fact, I already implemented it a while ago in the discussion-list-auto-load branch.
• This is pretty old though, so we need to bring it up to speed and make sure it works well.

[wion]

Not to be a dissident, but the nice thing about allowing a footer is that it compliments any custom uses of Flarum where the platform might be used as a blog, wiki, or project management discussion replacement. I'm not saying there are better tools for such specific scenarios, but this is open source and yo know people find interesting uses for tools. And with things like sijad's Links and Pages extensions, plus your API, I'm sure people will find other custom instances of using Flarum for a primary website too. All of these kinds of sites are task-based websites.

In all such cases, a Footer is an important element of such websites, for putting specific kinds of important information you don't want anywhere else, for example:

• Copyright details
• Identity of partners/sponsors
• A list of links to evergreen pages that don't warrant being in the header position (e.g., Contact, About, Legal, etc)

For people who might like to use Flarum that way (assuming you're open to users exploring new ways of using your tool) infinite scrolling might not make sense. And again, not always the best solution.

Let's consider the "streaming" argument... I've seen some people make the argument that it's the same as Twitter, or whatever. Wrong! Twitter is a single stream that literally never ends (depending how much one tweets and for how long they've been doing it) and has no topic separation. By contrast, a bulletin board conversation is one of many such streams, all separate by organizational and topical structure. No single conversation will ever keep going infinitely over time. Most conversations end by just a few posts in. And then what, nothing? That's a wasted opportunity for a footer to show up. Don't tell me you'd just jump to the next topic they didn't actually want, that would be confusing.

The longest FluxBB thread I've ever seen (a plugin thread for an open source tool) was 235 pages, showing 10 posts at a time (which could be regulated to show 50 posts at a time). The thread was started in 2007 and still runs. But that long thread is not the norm of most conversations in a discussion system. Again, this isn't Twitter. Infinite scrolling is overkill, IMO.

I've been in many projects in the past, contributing in various ways, having these kinds of conversations about the extent for functionality of a tool. The best situation has always resulted by not forcing a functionality on users. Instead, if it was really considered useful, make the functionality a feature that could be turned off or on in admin settings, giving the user the choice to employ the feature or not as their use situation dictated. I don't see why this wouldn't be an ideal situation for an admin setting.

Add a preference line to the Basics* admin panel asking: Do you want to use infinite scrolling for discussion threads?** And maybe explain why a site owner might use it or not. Then:

• If infinite scrolling, no footer appears.
• If no infinite scrolling, then footer appears.

That shouldn't be hard and it caters to more interests fairly.

(Edited for sentence corrections.)

[dav-is]

@wion I developed a footer extension that can work with infinite scrolling. I feel like it's the best solution for Flarum. https://discuss.flarum.org/d/2926-davis-custom-footer

[micronull]

Because of the endless scroll my phone starts to brake.

[franzliedke]

@De-Luxis Hi, that is very unfortunate. Because we are an open-source project and not a company, we cannot replace your broken phone. :disappointed:

Hehe.

In all seriousness: What exactly is broken? Performance? What kind of phone are we talking about?

[micronull]

@franzliedke A very old phone. All of the sites on which work is infinite scroll slowly. On russian site dirty.ru, make it possible to turn off the endless scroll and return traditional paginated. I think here, too, could realise such a feature.

[amdad]

Guys, auto load is cool. But I don't think it is enough at all. What about pagination of discussions like all forums have? I mean of course modern pagination - Flarum way. I hate when I can for example read only newest comments on youtube from top, and load only some more by LOAD MORE, Also when you have tons of discussions, list will get big. The same problem as with posts. Solution also should be the same.

https://discuss.flarum.org/5 = fifth "page" (part) of topics when you can UP and down to load next or previous bunch of discussions .

https://discuss.flarum.org/t/extensions/9 = ninth page of discussions with this tag

If we cannot have full scrubber for topics because of space. On left bottom of sidebar can be some basic data like "page 5 of 25". Just to show where we are.

[amdad]

Example of similar implementation: https://community.nodebb.org/category/10/nodebb-themes/139

[tobyzerner]

I don't understand the use-case for pagination on the discussion list.

If you just want to keep looking at more and more discussions, load more / infinite scroll does the job.

If you are looking for a specific discussion, filter by tag and/or use search.

If you are looking specifically for older discussions (ie, based on dates), use search gambits (created:, and we should implement an updated: too).

Why would you ever need to arbitrarily "jump to page 9" in a list of discussions?

[amdad]

Gambits will be cool. But not many people know this at start. Infinite load when there will be hundreds and thousands of topics will bloat page/browser. When there will be very many of topics.

What I didn't like most, is fact. When I browse long list that have dozens of items and they are loaded dynamically. When Page refresh I must browse and browse again. I should have option to start where I stopped.

[amdad]

Problem is visible here: https://meta.discourse.org/

There is a lot of content. At some point your browser may fail you or you just go back to browsing list later, and didn't want to spend extra time each time to browse from start to 1000+ topics.

It's like archive. But yea, gambits will save situation here because we can filter only older posts. But still, I don't think this is so user friendly (when it comes to basics/simplicity) as pagination. Google still use it ;)

I think older topics fading way faster when quick access to them is harder. It's easier to type number on end of a link than gambit. Direct opening from address bar is also quicker. And overall you know how far you are when you get numer of page or topic list position number, It's a very small thing but useful.

[amdad]

Good article on this topic: https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1

Some additional points:

1. You don't know how long is list. Is it 200 items or 10000. You scrolling without knowing where is the end.
2. You don't know your current position. On which position/part of list are you.
3. Performance on very long list may be problem. Scrollbar is tiny and harder to use.
4. When you refresh you always start from beginning.

Overall I feel as article state. Pure infinite load without any more functions is good only for news feeds like FB or Twitter. When all is about NEWEST items.

You all know this because you made best infinite load implementation I ever saw. For discussion view. So why not use some parts of that to power-up discussions list to be well implemented also. This is fundamental part of core.

"Things should be simple, but NOT simpler."

[tobyzerner]

@amdad Thanks for the info, will digest and respond soon.

[tobyzerner]

After doing some more reading, I think I better understand the point of pagination. To summarise points from the article @amdad linked and this NNG article:

• Pagination is better when a user may wish to locate/come back to a previously found item.

  • Having a paginated interface lets the user keep a mental location of the item. It’s much easier to remember that an item is on page 3 than it is to gauge where the item is positioned on an extremely long page (or within a fine-grained scrubber).
  • With infinite scrolling, when users get to a certain point in the stream, they can’t bookmark their location and come back to it later.

• Pagination lets the user feel in control.

  • Infinite scrolling can feel like drowning in an information abyss with no end in sight.
  • With pagination, there is a beginning and an end. People can anticipate the effort required to scan the page. There is a happy sense of completion when a page is reviewed. Pagination gives people control to decide whether or not to continue to the next page.

And one thing not mentioned in these articles:

• Pagination gives a strong visual sense of how much content there is in total.
  • It is obvious that a discussion with 10 pages is much bigger than a discussion with 1 page.
  • Our current post scrubber is the same height regardless of how big a discussion is. There is no obvious visual representation of how big the discussion actually is — you can only read the post count.

However, the main drawback of traditional pagination is that it requires an extra click any time you reach the bottom of the page. This sucks.

So, let's take the best parts from both solutions. Here's what I propose:

• Listing discussions

  • Infinite scrolling.
  • Each chunk of loaded discussions is separated by a horizontal line and a "Page #" header, so you know what page you're up to (and you retain some sense of control, ie, you can see you're up to Page 4 and decide "I should probably stop now").
  • The URL updates according to the current page number, so when you refresh the page, you don't lose your spot.

• Viewing a discussion

  • Infinite scrolling.
  • Each chunk of loaded posts is separated by a horizontal line and a "Page #" header, so you know what page you're up to (and you get a sense of where you are in the discussion).
  • Instead of the current scrubber in the sidebar, list the pages like so:
  • It's a much better visual representation of how big a discussion is. If there's 10 pages there, you can immediately see that the pagination is quite "tall" and know that it's a big discussion.
  • (If there are hundreds of pages, we would condense/collapse sections of the pagination links so that the first, last, and current pages are always visible.)
  • Remembering that a post is on "Page 3" is much easier than remembering it was at an approximate percentage in the scrubber (which would change as the discussion grows).

[dav-is]

I actually quite like the current layout of viewing a discussion. The argument being that it's difficult to find previous posts? If you create a bookmarking feature that adds stars tho the scroll bar that might fix that issue. Maybe a more powerful search feature inside of discussions may help with this issue as well.

Also, if you think about it, "pages" are arbitrary values as welll. Who's to say a page should have 15 or 20 posts and does it depend on the size of the post?

Discussions are infinite. They extend as long as the conversation goes. Dividing it into pages will not solve that. The next page will likely be a comment referencing the previous page.

As for listing discussions, each one is seperate and can be sorted any way you want. Pagenation might make sense here, but where is the value? As soon as someone posts a new discussion, a certain discussion you remember being on page 4 might be on page 5 now.

[amdad]

Thanks Toby, now you get the point. I can rest in peace.

[tobyzerner]

@dav-is

Also, if you think about it, "pages" are arbitrary values as welll.

Exactly, that's kind of the point. You're breaking up a large quantity (of posts) into more manageable "chunks". It's easier to comprehend, both from a "locating" perspective ("post A was around page 3, I think") and from a size estimation perspective ("at a glance over to the sidebar, I can see there are lots of pages"). The scrubber offers neither of these, nor does it offer any specific advantages of its own.

If you create a bookmarking feature that adds stars tho the scroll bar that might fix that issue.

Why require an extra feature (that in turn requires additional intentional user action) when you can have that functionality innately present in the navigation paradigm?

Discussions are infinite. They extend as long as the conversation goes. Dividing it into pages will not solve that.

Not trying to solve that. Just trying to make that "infiniteness" more comprehensible and manageable.

As for listing discussions, each one is seperate and can be sorted any way you want. Pagenation might make sense here, but where is the value? As soon as someone posts a new discussion, a certain discussion you remember being on page 4 might be on page 5 now.

The benefit of pagination on the discussion list is more psychological — it allows the user to keep better track of how far down the list they are (again, by breaking the list into "chunks"), gives a sense of completion when they reach a new page, and gives them more control to decide whether or not to continue to the next page.

Note that on the discussion list, I'm not proposing to have pagination links like in a discussion. (I agree that would be kind of pointless in most cases.) I'm just proposing a visual divider between each "page" of discussions that is loaded during infinite scroll, for the reasons stated above.

[dav-is]

I think you might be going somewhere with that. What would you say about footers as they're really the only place to put legal information?

[amdad]

Toby, I'm not so sure about 'Page #' on discussion view. Current scrubber is very nice thing. Scrubber you can grab and move. It's a cool thing. And dates! Date of posts on scrubber are more useful than only page number here. You can add pages as many 'Page #' to current scrubber as additional info. But don't get rid of scrubber totally.

Discussion list is different thing.

[dav-is]

Adding on to what @amdad is saying, discussions just seem to flow. And users tend to stop reading at a break in conversation, not a break in page. With my experience finding a prior post in a discussion page numbers were never of much help and a search function specific to that thread would have been more helpful.

[amdad]

Agree with dav-is. Discussion is flow. On discussion we already have "pagination" post by post. It's precise. Flarum show for logged users where you stop reading and place you @there. Overall Flarum scrubber and discussion view is best I ever saw . Don't remove anything, If you want add Pages you can, but it doesn't have big sense for me. I starting read where I stopped. Not page by page. Number of answers are static. So it's better to remember "Ok, I left on 345 answer" or "I was here about 20 February". So I jump there and read from there.

[tobyzerner]

What would you say about footers as they're really the only place to put legal information?

Footer will be in the sidebar, like Facebook.

discussions just seem to flow. And users tend to stop reading at a break in conversation, not a break in page.

Which is why we retain infinite scrolling, so you can keep reading without disruption.

But the fact that discussions "just seem to flow" is what makes navigation so unwieldy, and necessitates some way to break them up into more manageable pieces. Short of an AI that works out where the topic twists and turns, arbitrary pages are the next best thing.

On discussion we already have "pagination" post by post. By post number. It's precise.

Too precise. I'm never going to remember that a post of interest was post no. 145 out of 2387. I might remember that it was around page 7 though.

Flarum show for logged users where you stop reading and place you there by default.

That won't change.

With my experience finding a prior post in a discussion page numbers were never of much help and a search function specific to that thread would have been more helpful.

Search within discussion is planned but is a separate issue. My experience has been different, page numbers have been useful approximations (even if less so than search).

Scrubber you can grab and move. It's a cool thing.

Sure it's "cool", but it's not really useful. You grab it and move it and you never really know where you're gonna end up. Clicking on a page number is much more precise.

And dates! Date of posts on scrubber are very important.

The date in the scrubber only displays at the current position — the same date that is seen in the post(s) visible on screen. It doesn't display when you're dragging the scrubber (technically challenging to do that). So this isn't a selling point for the scrubber.

The pagination links I'm proposing are essentially the exact same thing as the scrubber:

• You can still see where you are in the discussion as you scroll up and down
• You can still click at a position to jump there
• It still shows you where the first unread post is, and will take you there when you click on it

It just has the following advantages:

• There is a visual representation of how big the discussion is (ie, how tall are the pagination links)
• Jumping to a position snaps to a "chunk" of posts (ie, page), which is ultimately more precise

Nothing else changes.

[amdad]

I agree here. Was just checking every best big we got stay in place. In this area Toby, I'm peaceful about your new improvements. We get what I want and ever more as I see :D Pushed you even further than I thought, but I'm sure it will be even better.

[dav-is]

I feel like the UI from your screenshot could be improved but what you say seems reasonable enough.

[tobyzerner]

@dav-is Any specific suggestions?

[amdad]

Those pages, it will be easy to grab scroll them like current scrubber? Maybe I'm lazy but I like grabbing ;) For example when I wan't quick jump from Page 50 to page 32.

[dav-is]

I imagined a timeline sort of think with the page numbers marked on it. It would be sort of the bar that we currently have but have a bell curve. At the top of the bell, it would have the current page you are on. Laterally to the current page would be increments of one, then aligning with the bell curve, would increase the increment of pages until reaching the maximum or minimum (depending on he side of the curve) page number. Sorry if this is confusing I'm on my phone so I can't exactly draw it out for you.

[franzliedke]

Great thinking, Toby. I agree with your thoughts, but it feels like I can't say much about how the UX will feel without seeing it live (hint hint).

As for the post scrubber: I just realized that it is pretty much unusable by keyboard, which is bad for accessibility.

Or is there some other keyboard-only navigation method I am missing. That alone would be a strong argument for page links, IMO.

[luceos]

If I may be so blunt to speak out of personal experience, the only occasion I use the scrubber is to either go to the top or to the bottom.. That's insane 😁

[sijad]

ello.co results loading is inspiring:

[buiductuan182]

@ Wion tôi đã phát triển một phần mở rộng chân có thể làm việc với vô hạn cuộn. Tôi cảm thấy đó là giải pháp tốt nhất cho Flarum. https://www.quangminhhanoi.com/dieu-hoa-toshiba-1

[BartVB]

The proposal (show 'pages' instead of posts) makes sense, but only if you know 'the old way' of doing things.

If you are new to forums then these divisions into 'pages' feel very arbitrary. A topic is a topicstart with a finite number of replies. Dividing these replies into arbitrarily sized 'chunks' doesn't really seem logical.

I also don't really see the problem that this is solving. When Discourse came I around I thought that this 'one page' topicview was weird and unworkable. You would lose track, wouldn't be able to remember where an interesting post was, what you had read and what was new.

Now that I've used a few 'modern' discussions systems for some time (like Flarum, Discourse, NodeBB) I've started to like the cleanness of it all. The scrubber shows you how many posts there are. It indicates where new posts are located, it makes it easy to go back in time (and you actually see the time when scrubbing) and it shows you where you are in a discussion and how many replies are left.

Infinite scrolling definitely has it's problems. Interesting read: http://danwin.com/2013/01/infinite-scroll-fail-etsy/ but a topicview isn't infinite. It's very finite, even with 30.000 post topics. It's trivial to see where you are in that stream of posts.

Discussionlists are a very different beast because you'll (almost) never want to view all of them. You scan the first few screenfuls of pages, it doesn't really matter that there are 20.000 items more, you'll find those topics with the search function.

This issue started with placeholders. Then the question was where to put the footer. IMO that can all be solved by keeping a footer in topic views (where you'll regularly hit the bottom) and link to an 'about' page from a header menu.

In my humble opinion; introducing 'chunks' complicates things, introduces visual clutter and moves Flarum back in time.

[Unresponsive]

I'm eagerly awaiting pagination feature! Lack of pagination keeps me from upgrading from my old forum software to flarum.

Dividing discussion lists and discussions themselves into pages gives me a sense of structure, a mental map of all the posts.

Besides it is difficult to use browser's text search when you are never sure which posts are currently loadead and which unloaded from the view. When discussion is paginated, I can easily click on page one, do a search for my keyword, then click on the next page and search again and be sure I haven't missed anything. Impossible with infinite scroll.

@tobscure if you want to indicate viewer's position on a page, you could even do this:

[ardacebi]

@tobscure If we ever see pagination, will we have the option to switch back to the old layout? I'm a fan of the old design if you ask me so having such customization option would be awesome.

[amdad]

Cool idea @Unresponsive. But orange progress bar line on top of gray underline would be enough instead of grayish full height bar.

[Unresponsive]

@tobscure If we ever see pagination, will we have the option to switch back to the old layout?

It could be a user selectable option. I detest infine scrolling.

[tobyzerner]

The new UX will be a hybrid of pagination and infinite scrolling, aiming to combine the best of both worlds. There won't be an option to switch between anything, that's a job for extensions.

[PeopleInside]

I agree with @Unresponsive at the moment i do not like infinite scrolling. Will be nice can decide if have or not in the admin side. Maybe i can be wrong, can be a great idea, just don't know. Usually i don't like much infinite scrolling websites.

Testing Flarum maybe in All discussion just few discussion are showed and you have always to press load more this is not very fast... mumble mumble. Not easy decision :)

Can be interesting this: https://flagrow.io/extensions/noriods/auto-more / https://github.com/noriods/automore solution as extension... so footer continue to exist and who want to load more automatically can do with an extension.

[vanloc0301]

@tobscure At 2019, I'd want at feature pagination like voz.party. Do you have any suggestion make like that?