Optimize lots of previews rendering

[skjnldsv]

We could try to resize on demand, but that means we would have to generate the preview as we scroll.

nextcloud-upload/lib/components/NodesPicker.vue

Lines 239 to 263 in 2606188

	async resizeImageWithCanvas(image: HTMLImageElement): Promise<string|null> {
	return new Promise((resolve) => {
	const width = image.width
	const height = image.height
	// Calc scale up factor
	const f = height < width ? PREVIEW_SIZE / height : PREVIEW_SIZE / width
	try {
	// Create your canvas
	const canvas = document.createElement('canvas')
	canvas.height = canvas.width = PREVIEW_SIZE
	const ctx = canvas.getContext('2d')
	const posX = (width * f - PREVIEW_SIZE) / 2 * -1
	const posY = (height * f - PREVIEW_SIZE) / 2 * -1
	ctx.drawImage(image, posX, posY, width * f, height * f)
	canvas.toBlob((blob) => {
	const url = URL.createObjectURL(blob)
	resolve(url)
	})
	} catch (e) {
	resolve(null)
	}
	})

Maybe using onload to fetchThePreview so that it gets replaced as we scroll with the lazy loading?
Or use an intersectObserver and trigger the preview Fetch 🤷