update dependencies, bump UI version, update UI image card loader

Author: IDNatte

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nyanga-read",
-	"version": "3.0.4",
+	"version": "3.0.8",
 	"author": {
 		"email": "idnatte@gmail.com",
 		"name": "IDNatte",
@@ -21,30 +21,30 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^2.0.2",
-		"@sveltejs/kit": "^1.22.3",
+		"@sveltejs/kit": "^2.5.10",
 		"@tailwindcss/typography": "^0.5.9",
 		"@types/cookie": "^0.5.1",
 		"@types/lodash": "^4.14.195",
 		"@types/showdown": "^2.0.1",
 		"@typescript-eslint/eslint-plugin": "^6.1.0",
-		"@typescript-eslint/parser": "^6.1.0",
+		"@typescript-eslint/parser": "^7.10.0",
 		"autoprefixer": "^10.4.14",
 		"eslint": "^8.45.0",
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-svelte3": "^4.0.0",
-		"lodash": "^4.17.21",
+		"lodash": "^4.17.4",
 		"postcss": "^8.4.27",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
 		"showdown": "^2.1.0",
 		"svelte": "^3.59.2",
-		"svelte-check": "^3.4.6",
+		"svelte-check": "^3.7.1",
 		"svelte-french-toast": "^1.2.0",
 		"svelte-i18n": "^4.0.0",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.6.0",
 		"typescript": "^5.1.6",
-		"vite": "^5.2.8"
+		"vite": "^5.2.11"
 	},
 	"type": "module"
 }

src/lib/components/image/ImageComponent.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { onMount, createEventDispatcher } from 'svelte';
 	import loaderStore from '$lib/store/loader/loader.store';
+	import { createEventDispatcher, onMount } from 'svelte';
 
 	export let alt: string | null | undefined;
 	export let src: string | null | undefined;
@@ -9,6 +9,7 @@
 	const dispatch: any = createEventDispatcher();
 	let loaded: boolean = false;
 	let thisImage: HTMLImageElement;
+	let error: boolean = false
 
 	loaderStore.set('loading');
 	onMount(() => {
@@ -24,10 +25,16 @@
 		thisImage.onerror = () => {
 			dispatch('imageloaderror');
 			loaded = false;
+			error = true
 		};
 	});
 </script>
 
+{#if !loaded}
+	<div class="animate-pulse bg-slate-200 w-full min-h-[580px] rounded">
+	</div>
+{/if}
+
 <img {src} {alt} class:loaded class={className} bind:this={thisImage} loading="lazy" />
 
 <style>