Add lazy thumbnail loading, restore scroll position when navigating to directory

svelte/src/filesystem/filemanager/GalleryView.svelte

@@ -27,11 +27,13 @@ let {
 			class:large_icons
 			title={child.name}
 		>
-			<div
+			<img
 				class="node_icon"
 				class:cover={fs_node_type(child) === "image" || fs_node_type(child) === "video"}
-				style='background-image: url("{fs_node_icon(child, 256, 256)}");'>
-			</div>
+				src={fs_node_icon(child, 256, 256)}
+				loading="lazy"
+				alt=""
+			/>
 			<div class="node_name">
 				{child.name}
 			</div>
@@ -51,6 +53,10 @@ let {
 	aspect-ratio: 1;
 	width: 150px;
 	height: 150px;
+	/* Skips style, layout and paint for nodes which are off-screen. The
+	intrinsic size keeps the scrollbar accurate while they're skipped */
+	content-visibility: auto;
+	contain-intrinsic-size: auto 150px;
 	overflow: hidden;
 	background: var(--body_background);
 	/* backdrop-filter: blur(4px); */
@@ -65,6 +71,7 @@ let {
 .file.large_icons {
 	width: 200px;
 	height: 200px;
+	contain-intrinsic-size: auto 200px;
 }
 
 /* On very small screens we switch to grid layout */
@@ -93,13 +100,13 @@ let {
 }
 .node_icon {
 	flex: 1 1 0;
+	min-height: 0;
+	width: 100%;
 	border-radius: 4px;
-	background-position: center;
-	background-size: contain;
-	background-repeat: no-repeat;
+	object-fit: contain;
 }
 .node_icon.cover {
-	background-size: cover;
+	object-fit: cover;
 }
 .node_name {
 	flex: 0 0 auto;