lazy-load collapsible when js is enabled

makes page load a tiny bit faster

5 files changed, 24 insertions, 7 deletions

diff --git a/src/lib/Collapsible.svelte b/src/lib/Collapsible.svelte
index f3a28d2..867117d 100644
--- a/src/lib/Collapsible.svelte
+++ b/src/lib/Collapsible.svelte
@@ -3,15 +3,28 @@
 	
 	Non-JS collapsible content.
  -->
+<script lang="ts">
+	let open: boolean
+</script>
 
-<details>
+<details bind:open>
 	<summary>
 		<slot name="title">
 			<h2>Details</h2>
 		</slot>
 	</summary>
 	<div>
-		<slot />
+		<!--
+			We do this so images inside the content are not loaded until it's
+			open. The browser (only tested on FF) doesn't handle this, although
+			it probably should.
+		-->
+		<noscript>
+			<slot />
+		</noscript>
+		{#if open}
+			<slot />
+		{/if}
 	</div>
 </details>
 
diff --git a/src/lib/ListItemWithIcon.svelte b/src/lib/ListItemWithIcon.svelte
index 2c7aade..7666c18 100644
--- a/src/lib/ListItemWithIcon.svelte
+++ b/src/lib/ListItemWithIcon.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 	export let url: string
+	export let alt: string | undefined = undefined
 </script>
 
-<li class="list-item-with-icon" style="background: url({url}) 0 0/1em no-repeat">
+<li class="list-item-with-icon">
+	<img class="list-item-icon" src={url} {alt} loading="lazy" />
 	<slot />
 </li>
 
@@ -12,7 +14,12 @@
 		padding-left: 1.2em;
 		position: relative;
 		right: 1.2em;
+	}
+	.list-item-icon {
 		image-rendering: crisp-edges;
 		image-rendering: pixelated;
+		height: 1em;
+		position: absolute;
+		margin-left: -1.2em;
 	}
 </style>
diff --git a/src/lib/layout/Loader.svelte b/src/lib/layout/Loader.svelte
index 524d975..901a780 100644
--- a/src/lib/layout/Loader.svelte
+++ b/src/lib/layout/Loader.svelte
@@ -5,7 +5,6 @@
 
 	let opacity = 1
 	function navigationStart() {
-		console.log('navigation start')
 		widthTransitionDuration = 0
 		opacity = 1
 		progress = 0
@@ -15,7 +14,6 @@
 		})
 	}
 	function navigationEnd() {
-		console.log('navigation end', widthTransitionDuration)
 		opacity = 0
 		setTimeout(() => {
 			widthTransitionDuration = 0
diff --git a/src/lib/minecraft/inventory.ts b/src/lib/minecraft/inventory.ts
index 7b35f0e..161c70a 100644
--- a/src/lib/minecraft/inventory.ts
+++ b/src/lib/minecraft/inventory.ts
@@ -60,7 +60,6 @@ export function itemToUrl(item: Item, packName?: string): string {
 
 export function skyblockItemToUrl(skyblockItemName: string) {
     const item = skyblockItemNameToItem(skyblockItemName)
-    console.log(skyblockItemName, item)
     const itemTextureUrl = itemToUrl(item, 'packshq')
     return itemTextureUrl
 }
diff --git a/src/lib/sections/Collections.svelte b/src/lib/sections/Collections.svelte
index 2e03d3f..9624ec2 100644
--- a/src/lib/sections/Collections.svelte
+++ b/src/lib/sections/Collections.svelte
@@ -21,7 +21,7 @@
 		<h3>{cleanId(categoryName)}</h3>
 		<ul>
 			{#each collections as collection}
-				<ListItemWithIcon url={skyblockItemToUrl(collection.name)}>
+				<ListItemWithIcon url={skyblockItemToUrl(collection.name)} alt={cleanId(collection.name)}>
 					<Tooltip>
 						<span slot="tooltip">
 							Amount: {collection.xp.toLocaleString()}