From decae894790947bd0730173b0ce80cd1ef864102 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Thu, 16 Feb 2023 23:28:55 -0800
Subject: [PATCH] Trying eager on first images.

---
 src/routes/portfolio/+page.svelte | 7 ++++---
 src/routes/uses/+page.svelte      | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte
index e93eb83..0ab594f 100644
--- a/src/routes/portfolio/+page.svelte
+++ b/src/routes/portfolio/+page.svelte
@@ -7,7 +7,8 @@
     TabPanels,
   } from "@rgossiaux/svelte-headlessui";
 	import { Image, Picture } from "svelte-lazy-loader";
-	import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png?format=webp;avif;png&metadata";
+	import personalSite from "$lib/assets/images/Bradley_Shellnut_New_Site.png";
+	import personalSiteFormats from "$lib/assets/images/Bradley_Shellnut_New_Site.png?format=webp;avif;png&metadata";
 	import personalSiteBlurred from "$lib/assets/images/Bradley_Shellnut_New_Site.png?w=100&png&blur=10";
   import weddingWebsite from "$lib/assets/images/Wedding_Website.png?format=webp;avif;png&metadata";
 	import weddingWebsiteBlurred from "$lib/assets/images/Wedding_Website.png?w=100&png&blur=10";
@@ -49,8 +50,8 @@
 						<div>
 							<h2>Personal Website</h2>
 							<div style="min-width: 200px; min-height: 500px;">
-								<Picture placeholder={personalSiteBlurred} src="images/Bradley_Shellnut_New_Site.png" alt="Home Page of bradleyshellnut.com">
-									{#each personalSite as { src, format }}
+								<Picture placeholder={personalSiteBlurred} src={personalSite} alt="Home Page of bradleyshellnut.com">
+									{#each personalSiteFormats as { src, format }}
 										<source data-srcset={src} type="image/{format}" />
 									{/each}
 								</Picture>
diff --git a/src/routes/uses/+page.svelte b/src/routes/uses/+page.svelte
index 636ce6f..12d6cb5 100644
--- a/src/routes/uses/+page.svelte
+++ b/src/routes/uses/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { Picture } from "svelte-lazy-loader";
 	import SEO from "$root/lib/components/SEO.svelte";
-	import desktop from '$lib/assets/images/Desktop_so_clean.jpg?format=webp;avif;jpg&metadata';
+	import desktop from '$lib/assets/images/Desktop_so_clean.jpg';
+	import desktopFormats from '$lib/assets/images/Desktop_so_clean.jpg?format=webp;avif;jpg&metadata';
 	import desktopBlurred from '$lib/assets/images/Desktop_so_clean.jpg?w=100&jpg&blur=10';
 </script>
 
@@ -46,8 +47,8 @@
 		<div style="display: grid; grid-template-columns: minmax(400px, 0.65fr); justify-content: center; margin-bottom: 2rem;">
 			<figure>
 				<div>
-					<Picture placeholder={desktopBlurred} src="images/Desktop_so_clean.jpg" alt="Clean desk with Samsung monitor and Ducky Keyboard">
-						{#each desktop as { src, format }}
+					<Picture placeholder={desktopBlurred} src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading='eager'>
+						{#each desktopFormats as { src, format }}
 							<source data-srcset={src} type="image/{format}" />
 						{/each}
 					</Picture>