Grid view does not display all images in large directory

[davidc]

Steps to reproduce

1. Create a directory with 100 photos
2. View it on the web (either logged in or with a public share link)
3. The list is displayed with the first ~15 entries (depending on screen size)
4. Immediately, without scrolling, click the grid view button.
5. Only the first ~20 entries are displayed. Scrolling is not possible because the grid view thinks everything is loaded.
6. Return to list view.
7. Scroll to the bottom to make it load the full file list into the browser
8. Return to grid view.
9. Now all photos are displayed.

Expected behaviour

When entering grid view, it should load enough images to fill the screen, and enable scrollbar if more are available.

Actual behaviour

Only the files on the list that has already been loaded in the browser are displayed.

Server configuration

Operating system:
Debian GNU/Linux 9.9

Web server:
Apache2

Database:
MySQL

PHP version:
7.3.6

Nextcloud version: (see Nextcloud admin page)
16.0.3

Updated from an older Nextcloud/ownCloud or fresh install:
Database is updated, files are clean install each time.

Where did you install Nextcloud from:
tar.bz2

Signing status:

Signing status

Technical information
=====================
The following list covers which files have failed the integrity check. Please read
the previous linked documentation to learn more about the errors and how to fix
them.

Results
=======
- core
	- EXTRA_FILE
		- config.orig/config.sample.php
		- config.orig/.htaccess

Raw output
==========
Array
(
    [core] => Array
        (
            [EXTRA_FILE] => Array
                (
                    [config.orig/config.sample.php] => Array
                        (
                            [expected] => 
                            [current] => 0cd5ffc968aafae9a2979b13b71cfa901aa40f1928e7b4406157a426a3229f504711f91078e2a93a0a9b6a2dc6d4796ef57df544ddc8c17d416b4bbef6faa11b
                        )

                    [config.orig/.htaccess] => Array
                        (
                            [expected] => 
                            [current] => e4db9834dbd2604ea05574d21fe1a185e87f2e254c78caae80c9bec43e6001315e16864efca1c38a456bdb11a3c6392d284e41038ab0fa1d2fc3b27bd84d8f9f
                        )

                )

        )

)

List of activated apps:

App list

Enabled:
  - accessibility: 1.2.0
  - activity: 2.9.1
  - cloud_federation_api: 0.2.0
  - comments: 1.6.0
  - dav: 1.9.2
  - federatedfilesharing: 1.6.0
  - federation: 1.6.0
  - files: 1.11.0
  - files_pdfviewer: 1.5.0
  - files_rightclick: 0.13.0
  - files_sharing: 1.8.0
  - files_texteditor: 2.8.0
  - files_trashbin: 1.6.0
  - files_versions: 1.9.0
  - files_videoplayer: 1.5.0
  - firstrunwizard: 2.5.0
  - gallery: 18.3.0
  - logreader: 2.1.0
  - lookup_server_connector: 1.4.0
  - nextcloud_announcements: 1.5.0
  - notifications: 2.4.1
  - oauth2: 1.4.2
  - password_policy: 1.6.0
  - privacy: 1.0.0
  - provisioning_api: 1.6.0
  - recommendations: 0.4.0
  - serverinfo: 1.6.0
  - sharebymail: 1.6.0
  - support: 1.0.0
  - survey_client: 1.4.0
  - systemtags: 1.6.0
  - theming: 1.7.0
  - twofactor_backupcodes: 1.5.0
  - updatenotification: 1.6.0
  - viewer: 1.0.0
  - workflowengine: 1.6.0
Disabled:
  - admin_audit
  - encryption
  - files_external
  - user_ldap

Nextcloud configuration:

Config report

{
    "system": {
        "instanceid": "***REMOVED SENSITIVE VALUE***",
        "passwordsalt": "***REMOVED SENSITIVE VALUE***",
        "secret": "***REMOVED SENSITIVE VALUE***",
        "trusted_domains": [
            "mycloud"
        ],
        "datadirectory": "***REMOVED SENSITIVE VALUE***",
        "overwrite.cli.url": "https:\/\/mycloud\/",
        "dbtype": "mysql",
        "version": "16.0.3.0",
        "dbname": "***REMOVED SENSITIVE VALUE***",
        "dbhost": "***REMOVED SENSITIVE VALUE***",
        "dbport": "",
        "dbtableprefix": "oc_",
        "dbuser": "***REMOVED SENSITIVE VALUE***",
        "dbpassword": "***REMOVED SENSITIVE VALUE***",
        "installed": true,
        "htaccess.RewriteBase": "\/",
        "mail_from_address": "***REMOVED SENSITIVE VALUE***",
        "mail_smtpmode": "smtp",
        "mail_domain": "***REMOVED SENSITIVE VALUE***",
        "memcache.local": "\\OC\\Memcache\\Memcached",
        "memcached_servers": [
            [
                "localhost",
                11211
            ]
        ],
        "maintenance": false,
        "loglevel": 2,
        "logfile": "\/usr\/local\/www\/mycloud\/logs\/nextcloud.log",
        "mail_smtphost": "***REMOVED SENSITIVE VALUE***",
        "simpleSignUpLink.shown": false,
        "mysql.utf8mb4": false,
        "updater.secret": "***REMOVED SENSITIVE VALUE***"
    }
}

Are you using external storage, if yes which one:
No

Are you using encryption:
No

Are you using an external user-backend, if yes which one:
No

Client configuration

Browser:
Test in latest Chrome and Firefox.

Operating system:
Windows 10

Logs

Web server error log

Web server error log

No errors displayed.

Nextcloud log (data/nextcloud.log)

Nextcloud log

No log entries at the time of viewing.

Browser log

Browser log

DevTools failed to parse SourceMap: https://mycloud/core/js/dist/share_backend.js.map
DevTools failed to parse SourceMap: https://mycloud/apps/files_videoplayer/js/main.js.map
DevTools failed to parse SourceMap: https://mycloud/core/js/dist/main.js.map
JQMIGRATE: Migrate is installed, version 1.4.1
The escapeHTML library is deprecated! It will be removed in nextcloud 19.
DevTools failed to parse SourceMap: https://mycloud/core/js/dist/main.js.map
DevTools failed to parse SourceMap: https://mycloud/core/js/dist/share_backend.js.map
DevTools failed to parse SourceMap: https://mycloud/apps/files_videoplayer/js/main.js.map
The humanFileSize library is deprecated! It will be removed in nextcloud 19.
DevTools failed to parse SourceMap: https://mycloud/apps/files_texteditor/build/public-share.js.map

[khlschrnk]

Same here. I have to scroll down in list view to load all files before I am able to see the full list in grid view.
I also use 16.0.3.

[the-sane]

I'm only noticing this behavior when viewing a folder from a public share link? When I view the same pictures folder while logged into my account, grid view properly loads additional photos as I scroll. But for anyone using the public share link, grid view seems broken as described above.

It will happen even with a small number of photos, and is easily reproduced by resizing your browser window to a smaller size. Only the photos initially visible in list view (plus a couple extra) will show up in grid view unless you scroll to the end of list view first to load in all the files.

[davidc]

It also happens when logged in for me. This is a directory of 247 images, and the grid view displays them all only if I load the full list in list view first.

[davidc]

Of note: this misbehaviour only occurs if I have started in list view, then switch to grid view.

If I enter the folder with grid view already on, it loads them all properly (dynamically).

[the-sane]

Does it only happen to shared folders for you?

(edit for clarification)
When I'm logged in and navigate to a pictures folder from the files view, I will see the same thing as you when I switch to grid mode, but as soon as I scroll the additional photos begin to load in. This is not the case when I view the same folder from its share link.

[davidc]

I do not get a scrollbar, so I do not have the option to scroll to see more. Maybe because my screen resolution is such that I can easily see the initial 20 loaded (2560x1440 @ 125%).

[davidc]

1. Downloaded 86 test images from https://osdn.net/frs/g_redir.php?m=kent&f=fotohound%2Fsample-pictures%2FSample%2FSample-Pictures.zip into a single folder "testimages".

2. Allowed "testimages" to sync to the server.

3. Viewed folder on web in list mode.

4. Switched to grid mode:

5. Switched to list mode and scrolled to the bottom to force them to load.

6. Switched back into grid mode:

and I can scroll to see all 86.

[the-sane]

Okay I believe I have found an explanation. As you said, it's directly connected to the size of your browser window and/or display resolution:

Repeat your exact same steps above, except shrink your browser window to a much smaller size. At step 4, you will now have a scroll bar and you can scroll to load more images in grid mode. (in other words, the bug does not happen in a smaller browser window)

This also explains why I was only seeing the problem when viewing the folder from a shared link: Because the share link hides the left nav pane, dedicating the whole window to the grid view. But I can now reproduce it in all situations if my browser window is large enough.

For reference, I'm testing it with only 35 images in a folder so it is not dependent on having a large number of photos, only more than can be displayed at once without scrolling.

[the-sane]

@davidc I need some help testing a possible fix. My fix below works when I'm viewing the folder from its share link but not from my main Nextcloud screen and I don't quite understand why. I think it might be because I'm using the snap. I see you aren't using snap, so can you please try the following:

Edit the following file (I think this is the correct path for you):
make a backup first!!!
www/htdocs/nextcloud/apps/files/js/filelist.js

Go to line 662 to find this function:

_onGridviewChange: function() {
	var show = this.$showGridView.is(':checked');
	// only save state if user is logged in
	if (OC.currentUser) {
		$.post(OC.generateUrl('/apps/files/api/v1/showgridview'), {
			show: show
		});
	}
	this.$showGridView.next('#view-toggle')
		.removeClass('icon-toggle-filelist icon-toggle-pictures')
		.addClass(show ? 'icon-toggle-filelist' : 'icon-toggle-pictures')
		
	$('.list-container').toggleClass('view-grid', show);
},

Add the following just before the closing brace:

	if (show) {
		this._onScroll();
	}

Refresh your page and see if you still have the problem. Please test both accessing the folder from its share link and also from your main page (ie, click the files icon from the list at the top and navigate to the folder).

What this does, is if grid view is toggled to from list view, it tries to scroll the page to load more files. You'll notice a similar thing was done in the same file up at line 272, when unchecking the "Settings->Show hidden files" option.

if (!showHidden) {
	// hiding files could make the page too small, need to try rendering next page
	self._onScroll();
}

[davidc]

Yes, this fixes it in both situations, thank you!

[the-sane]

That's awesome, thanks for testing. Once I understand why it's not working for me with my snap (for the sake of being thorough), I'll submit a pull request.

[davidc]

Maybe caching? I had to shift+refresh to force the js to reload.