Adding media query plugin for showing skeletons and lazy image loading plugin.

package.json

@@ -45,6 +45,7 @@
     "@types/feather-icons": "^4.7.0",
     "cookie": "^0.5.0",
     "feather-icons": "^4.29.0",
+    "svelte-lazy-loader": "^1.0.0",
     "svelte-media-query-store": "^1.0.0",
     "zod": "^3.19.1",
     "zod-to-json-schema": "^3.18.1"

pnpm-lock.yaml

@@ -26,6 +26,7 @@ specifiers:
   sass: ^1.56.0
   svelte: ^3.52.0
   svelte-check: ^2.9.2
+  svelte-lazy-loader: ^1.0.0
   svelte-media-query-store: ^1.0.0
   svelte-preprocess: ^4.10.7
   tslib: ^2.4.1
@@ -42,6 +43,7 @@ dependencies:
   '@types/feather-icons': 4.7.0
   cookie: 0.5.0
   feather-icons: 4.29.0
+  svelte-lazy-loader: 1.0.0
   svelte-media-query-store: 1.0.0
   zod: 3.19.1
   zod-to-json-schema: 3.18.1_zod@3.19.1
@@ -2281,6 +2283,10 @@ packages:
       svelte: 3.52.0
     dev: true
 
+  /svelte-lazy-loader/1.0.0:
+    resolution: {integrity: sha512-AZD6R60vksyojn21FgXLglmBiBB9K5Dkdu0hdGrLbCaRCYT68IsWkZfRUqKhMx1IfzqWcZQ8X9y/f+Ih0oNQkQ==}
+    dev: false
+
   /svelte-media-query-store/0.0.3:
     resolution: {integrity: sha512-LxM2AEyE4BqVHNdEb8aZOwcSf5oyJcZWSRlSkQPxnQyp6ytGwQs3gsmaZ1udEBeL7jHldWwNrbaFwAG5W7eTXw==}
     dev: false

src/lib/components/game/index.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
+	import { Image } from 'svelte-lazy-loader';
 	import { fade } from 'svelte/transition';
 	import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline';
 	import type { GameType, SavedGameType } from '$lib/types';
@@ -46,8 +47,14 @@
 
 <article class="game-container" transition:fade>
 	<h2>{game.name}</h2>
-	<a class="thumbnail" href={`/game/${game.id}`}>
-		<img src={game.thumb_url} alt={`Image of ${game.name}`} />
+	<a
+		class="thumbnail"
+		href={`/game/${game.id}`}
+		title={`View ${game.name}`}
+		data-sveltekit-prefetch
+	>
+		<Image src={game.thumb_url} alt={`Image of ${game.name}`} />
+		<!-- <img src={game.thumb_url} alt={`Image of ${game.name}`} /> -->
 		<!-- loading="lazy" decoding="async" -->
 	</a>
 

src/lib/components/search/advancedSearch/index.svelte

@@ -3,7 +3,6 @@
 	import { boredState } from '$lib/stores/boredState';
 
 	export let form: ActionData;
-	console.log('advanced search form data', form);
 	let submitting = $boredState?.loading;
 	let minAge = +form?.minAge || 1;
 	let minPlayers = +form?.minPlayers || 1;
@@ -78,9 +77,7 @@
 		{/if}
 	</div>
 </fieldset>
-<!-- <button type="submit" disabled={submitting}>Submit</button> -->
 
-<!-- </form> -->
 <style lang="scss">
 	fieldset {
 		display: grid;

src/lib/components/search/random/index.svelte

@@ -35,7 +35,6 @@
 		boredState.update((n) => ({ ...n, loading: true }));
 		return async ({ result }) => {
 			boredState.update((n) => ({ ...n, loading: false }));
-			// console.log('result main page search', result);
 			// `result` is an `ActionResult` object
 			if (result.type === 'success') {
 				// console.log('In success');

src/lib/components/search/textSearch/index.svelte

@@ -4,6 +4,7 @@
 	import { fade } from 'svelte/transition';
 	import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui';
 	import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid';
+	import { xl, md } from '$lib/stores/mediaQueryStore';
 	import { boredState } from '$lib/stores/boredState';
 	import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
 	import { applyAction, enhance } from '$app/forms';
@@ -34,13 +35,25 @@
 	let pageSize = 10;
 	let page = +form?.data?.page || 1;
 	let totalItems = form?.totalCount || data?.totalCount || 0;
+	let submitting = $boredState?.loading;
+	let name = form?.name || '';
+	let disclosureOpen = false;
+
 	$: skip = (page - 1) * pageSize;
 	$: console.log('submit button', submitButton);
 	$: showPagination = $gameStore?.length > 1;
 
-	let submitting = $boredState?.loading;
-	let name = form?.name || '';
-	let disclosureOpen = false;
+	if ($xl) {
+		numberOfGameSkeleton = 8;
+	} else if ($md) {
+		numberOfGameSkeleton = 3;
+	} else {
+		numberOfGameSkeleton = 1;
+	}
+
+	let placeholderList = [...Array(numberOfGameSkeleton).keys()];
+	console.log(placeholderList);
+
 	if (form?.error) {
 		disclosureOpen = true;
 	}
@@ -95,6 +108,7 @@
 	action="/search"
 	method="post"
 	use:enhance={() => {
+		gameStore.removeAll();
 		boredState.update((n) => ({ ...n, loading: true }));
 		return async ({ result }) => {
 			boredState.update((n) => ({ ...n, loading: false }));
@@ -200,7 +214,7 @@
 	<div class="games">
 		<h1>Games Found:</h1>
 		<div class="games-list">
-			{#each [...Array(numberOfGameSkeleton).keys()] as game, i}
+			{#each placeholderList as game, i}
 				<SkeletonPlaceholder
 					style="width: 100%; height: 500px; border-radius: var(--borderRadius);"
 				/>

src/routes/+page.svelte

@@ -6,13 +6,6 @@
 
 	export let data: PageData;
 	export let form: ActionData;
-	// if ($xl) {
-	// 	numberOfGameSkeleton = 8;
-	// } else if ($md) {
-	// 	numberOfGameSkeleton = 3;
-	// } else {
-	// 	numberOfGameSkeleton = 1;
-	// }
 </script>
 
 <svelte:head>

src/routes/collection/+page.svelte

@@ -55,7 +55,6 @@
 	}
 
 	async function handlePerPageEvent(event: CustomEvent) {
-		console.log('Per Page Event called', event.detail);
 		page = 1;
 		pageSize = event.detail.pageSize;
 		await tick();

src/routes/game/[id]/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { fade, fly } from 'svelte/transition';
+	import { Image } from 'svelte-lazy-loader';
 	import {
 		ExternalLinkIcon,
 		MinusCircleIcon,
@@ -57,7 +58,8 @@
 <section class="game">
 	<div>
 		<a class="thumbnail" href={game.url}>
-			<img src={game.image_url} alt={`Image of ${game.name}`} />
+			<Image src={game.thumb_url} alt={`Image of ${game.name}`} />
+			<!-- <img src={game.image_url} alt={`Image of ${game.name}`} /> -->
 		</a>
 	</div>
 	<div style="display: grid; place-items: center; gap: 2rem;">

src/routes/search/+page.server.ts

@@ -58,9 +58,10 @@ export const actions: Actions = {
       if (minPlayers && maxPlayers) {
         if (+minPlayers > +maxPlayers) {
           return invalid(400, { minPlayers, error: { id: 'minPlayers', message: 'Min must be less than max' } });
-        } else if (maxPlayers < minPlayers) {
-          return invalid(400, { maxPlayers, error: { id: 'maxPlayers', message: 'Max must be greater than min' } });
         }
+        // else if (+maxPlayers < +minPlayers) {
+        //   return invalid(400, { maxPlayers, error: { id: 'maxPlayers', message: 'Max must be greater than min' } });
+        // }
         if (exactMinPlayers) {
           queryParams.min_players = +minPlayers;
         } else {

src/routes/wishlist/+page.svelte

@@ -51,7 +51,6 @@
 	}
 
 	async function handlePerPageEvent(event: CustomEvent) {
-		console.log('Per Page Event called', event.detail);
 		page = 1;
 		pageSize = event.detail.pageSize;
 		await tick();