From cc279db1dfd4374c46e8d7acd30e627ae3e4adbb Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Sun, 12 Nov 2023 15:53:02 -0800
Subject: [PATCH] Fixing loading image when scripts are not loaded.

---
 package.json                        | 7 ++++++-
 src/lib/components/LazyImage.svelte | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 16db7b9..548b38c 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,11 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "NODE_OPTIONS=\"--inspect\" vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
 		"test": "npm run test:integration && npm run test:unit",
+		"test:ui": "svelte-kit sync && playwright test --ui",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
@@ -59,6 +60,10 @@
 		"vitest": "^0.32.2"
 	},
 	"type": "module",
+	"engines": {
+		"node": ">=18.0.0 <19.0.0 || >=20.0.0 <21.0.0",
+		"pnpm": ">=8"
+	},
 	"dependencies": {
 		"@melt-ui/svelte": "^0.50.1",
 		"@types/nprogress": "^0.2.3",
diff --git a/src/lib/components/LazyImage.svelte b/src/lib/components/LazyImage.svelte
index e98e86b..9d8c36b 100644
--- a/src/lib/components/LazyImage.svelte
+++ b/src/lib/components/LazyImage.svelte
@@ -21,7 +21,7 @@
 
 <div class="wrap">
 	<Img class={clazz} {style} {src} {alt} {loading} bind:ref on:load={() => (loaded = true)} />
-	<div class="blur" class:loaded />
+	<div class:blur={loaded} class:loaded />
 </div>
 
 <style lang="postcss">