Merge pull request #167 from hearchco/as/fix/image-layout-loading

fix(loadimages): layout

src/lib/components/search/load/images/LoadImage.svelte

@@ -3,13 +3,13 @@
 	export let colored: boolean = false;
 </script>
 
-<div class="animate-pulse">
+<div class="w-full h-full animate-pulse">
 	<div
 		class:bg-hearchco-primary={colored}
 		class:dark:bg-hearchco-secondary={colored}
 		class:bg-gray-300={!colored}
 		class:dark:bg-gray-700={!colored}
-		class="h-full w-full overflow-hidden rounded-lg"
+		class="w-full h-full overflow-hidden rounded-lg"
 	>
 		<div class="h-48 object-cover"></div>
 	</div>

src/lib/components/search/load/images/LoadImages.svelte

@@ -2,14 +2,32 @@
 	// components
 	import LoadImage from '$lib/components/search/load/images/LoadImage.svelte';
 
+	// types
+	import type { ImageFormat } from '$lib/types/result';
+
 	// variables
 	const numberOfResults: number = 32;
+	const fakeImages: ImageFormat[] = randomImages();
+
+	function randomNumber(min: number, max: number): number {
+		return Math.floor(Math.random() * (max - min + 1) + min);
+	}
+	function randomImages(): ImageFormat[] {
+		return Array.from({ length: numberOfResults }, (_) => ({
+			Height: randomNumber(125, 200),
+			Width: randomNumber(100, 300)
+		}));
+	}
 </script>
 
-<div class="px-4 py-8">
+<div class="w-full px-4 py-8">
 	<section id="images" class="grid grid-cols-fit auto-rows-[200px] grid-flow-dense gap-2">
-		{#each { length: numberOfResults } as _, i}
-			<div class="flex-none">
+		{#each fakeImages as result}
+			<div
+				class:row-span-2={(result.Height * 0.8) / result.Width > 1}
+				class:sm:col-span-2={result.Height / (result.Width * 0.64) < 1}
+				class="flex-none"
+			>
 				<LoadImage colored={Math.random() <= 0.1} />
 			</div>
 		{/each}

src/lib/types/result.ts

@@ -5,7 +5,7 @@ type EngineRank = {
 	OnPageRank: number;
 };
 
-type ImageFormat = {
+export type ImageFormat = {
 	Height: number;
 	Width: number;
 };