Files browser: endless scroll of files list

[DeepDiver1975]

As explained by @jancborchardt in #164

endless scroll, but with »lazy loading« if it’s over a certain limit, say 50 files (or whenever performance is impacted). That means only load as many entries as the viewport can show, and then some. When people scroll down, start loading more. Then when it’s scrolled more, load more. To people it should seem instantaneous.

[jancborchardt]

Some more: Lazy loading is usually used for sites with »endless« content, like news streams.

With personal files it’s a bit different though: When you have 150 Files, but only 50 are loaded then the scroll bar will be a bit short, which might be confusing and lead you to think »why only so few files, I have more?«. Then you scroll down and see more, but the initial confusion will probably always be there. To alleviate that, can we at all times show all entries (via elements.length) but not fill them with actual content?

[DeepDiver1975]

or use pagination?
The user immediately can see that there is more.

[jancborchardt]

Pagination is a really bad system because pages are broken at arbitrary limits (say 20 entries) and a bunch of very related things might be on different pages. Also, no other file manager does this.

[mosch]

I think showing all the files is the right way. Even if there are hundreds or thousands of files in a directory. Current browsers can show a lot of elements without any trouble. Using a caching system should prevent long loading times caused by the PHP process.
When the directory contains more files than ownCloud can process, it should cut off and just say "and thousands more" files or s.th. like this.
I think a "endless scroll" is the wrong solution for a file manager!

[jancborchardt]

So is there a performance impact when many files are displayed? And if so, where does it come from? Just showing all files is certainly better than lazy loading, and pagination is just really bad.

[mosch]

There is strong impact on the performance when showing a lot of files. It comes from a lot of mark-up that is generated for every row of the files table: For each row there is a base64 encoded image in the markup, just to display the type. There should be a CSS class for that instead. Furthermore there is an extra style attribute with a color in it, just to make the size look grey. This could also be added to the already existing "filesize" class. But I think this also has something to to with the CSS "framework" ownCloud provides.

Optimizing the overview css / javascript might help a lot displaying huge lists of files.

[jancborchardt]

So does someone want to work on this or what? :)

[jancborchardt]

See »Virtual list in vanilla Javascript«.

[DeepDiver1975]

This is being worked on: #7167