Opening an image in a directory with many files is very slow

[jonnykl]

Describe the bug
When opening an image in a directory with many (~10k) images, my browser hangs for about a minute. The longest time seems to be consumed by

viewer/src/views/Viewer.vue

Lines 797 to 799 in c77de03

	this.fileList = sortedNodes.map(node => {
	return filteredFiles.find(file => file.filename === node.path)
	})

The map() call here has a runtime complexity of O(n^2) with n being the number of files in the directory which is not ideal.

If I don't overlook something, the goal of

viewer/src/views/Viewer.vue

Lines 778 to 799 in c77de03

	// sort like the files list
	// TODO: implement global sorting API
	// https://github.com/nextcloud/server/blob/a83b79c5f8ab20ed9b4d751167417a65fa3c42b8/apps/files/lib/Controller/ApiController.php#L247
	const nodes = filteredFiles.map(
	file => new NcFile({
	source: davRemoteURL + davGetRootPath() + file.filename,
	id: file.fileid,
	displayname: file.displayname,
	mime: file.mime,
	mtime: new Date(file.lastmod),
	owner: this.currentFile.ownerId,
	root: davGetRootPath(),
	}),
	)
	const sortedNodes = sortNodes(nodes, {
	sortingMode: this.sortingConfig.key,
	sortingOrder: this.sortingConfig.asc ? 'asc' : 'desc',
	})
	this.fileList = sortedNodes.map(node => {
	return filteredFiles.find(file => file.filename === node.path)
	})

is to get filteredFiles sorted and assign that to this.fileList.

From an algorithmic point of view, it should be possible that sortNodes() (or a similar function) returns a list of indices that sort the underlying list (here nodes) like argsort in NumPy. Then this list of indices can be used to reorder filteredFiles. Then, except for the sorting everything should run in O(n).

To Reproduce
Steps to reproduce the behavior:

1. Open an image in a directory with many (~10k) images
2. Wait until the prev/next buttons appear

Desktop (please complete the following information):

• OS: Ubuntu 22.04
• Browser Firefox 144.0.2

[skjnldsv]

Should be fixed once we have #2989