fix: crash on undefined height/width

src/lib/components/kurosearch/media-gif/Gif.svelte

@@ -4,6 +4,7 @@
 	import { getGifSources } from '$lib/logic/media-utils';
 	import { base } from '$app/paths';
 	import { postobserve } from '$lib/logic/use/postobserve';
+	import { calculateAspectRatioCss } from '../post/ratio';
 
 	export let post: kurosearch.Post;
 
@@ -22,7 +23,7 @@
 	}
 </script>
 
-<div class="container" style={`aspect-ratio: ${post.width} / ${post.height}`}>
+<div class="container" style="aspect-ratio: {calculateAspectRatioCss(post.width, post.height)}">
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<img

src/lib/components/kurosearch/media-image/Image.svelte

@@ -3,11 +3,12 @@
 	import { clickOnEnter } from '$lib/logic/keyboard-utils';
 	import { postobserve } from '$lib/logic/use/postobserve';
 	import highResolutionEnabled from '$lib/store/high-resolution-enabled';
+	import { calculateAspectRatio, calculateAspectRatioCss } from '../post/ratio';
 
 	export let post: kurosearch.Post;
 
-	const ratio = post.width / post.height;
-	const expandable = ratio < 0.33;
+	let ratio = calculateAspectRatio(post.width, post.height);
+	let expandable = ratio < 0.33;
 
 	let open: boolean;
 
@@ -23,7 +24,7 @@
 		loading="lazy"
 		data-src={src}
 		alt={post.id.toString()}
-		style={`aspect-ratio: ${post.width} / ${post.height}`}
+		style="aspect-ratio: {calculateAspectRatioCss(post.width, post.height)}"
 		width={post.width}
 		height={post.height}
 		tabindex="0"

src/lib/components/kurosearch/post/MosaicPost.svelte

@@ -2,12 +2,13 @@
 	import { formatCount } from '$lib/logic/format-count';
 	import { getPostId } from '$lib/logic/id-utils';
 	import { isEnter } from '$lib/logic/keyboard-utils';
+	import { calculateAspectRatio } from './ratio';
 
 	export let post: kurosearch.Post;
 
 	let maxRatio = 1 / 3;
 	let rowsPerSquare = 5;
-	let ratio = post.width / post.height;
+	let ratio = calculateAspectRatio(post.width, post.height);
 	let rows = Math.max(Math.min(Math.round(rowsPerSquare / ratio), rowsPerSquare / maxRatio), 2);
 
 	const isImage = (src: string) =>

src/lib/components/kurosearch/post/SingleColumnPost.svelte

@@ -28,10 +28,12 @@
 		new URL(`https://kurosearch.com/post?id=${post.id}&src=${encodeURIComponent(post.file_url)}`),
 		new URL(`https://rule34.xxx/index.php?page=post&s=view&id=${post.id}`),
 		new URL(post.file_url),
-		...post.source
-			.split(' ')
-			.filter((x) => isValidUrl(x))
-			.map((x) => new URL(x))
+		...(post.source
+			? post.source
+					.split(' ')
+					.filter((x) => isValidUrl(x))
+					.map((x) => new URL(x))
+			: [])
 	];
 </script>
 

src/lib/components/kurosearch/post/ratio.ts

@@ -0,0 +1,15 @@
+export const calculateAspectRatio = (width: number, height: number) => {
+	if (width && height) {
+		return width / height;
+	}
+
+	return 1;
+};
+
+export const calculateAspectRatioCss = (width: number, height: number) => {
+	if (width && height) {
+		return `${width} / ${height}`;
+	}
+
+	return '1 / 1';
+};

src/lib/components/kurosearch/results/ResultHeader.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { formatCount } from '$lib/logic/format-count';
+	import results from '$lib/store/results-store';
+	import SortFilterConfig from '../sort-filter-config/SortFilterConfig.svelte';
+
+	export let loading: boolean;
+</script>
+
+<div>
+	<span class:loading>{formatCount($results.postCount)} posts</span>
+	<SortFilterConfig on:sortfilterupdate />
+</div>
+
+<style>
+	div {
+		width: 100%;
+		height: var(--line-height);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		box-sizing: border-box;
+	}
+
+	@media (width <= calc(800px + 2rem)) {
+		div {
+			padding-inline: var(--small-gap);
+		}
+	}
+
+	@keyframes sweep {
+		0% {
+			background: var(--background-1);
+		}
+		50% {
+			background: var(--background-2);
+		}
+		100% {
+			background: var(--background-1);
+		}
+	}
+
+	.loading {
+		border-radius: var(--border-radius);
+		color: transparent;
+		padding-inline: 1em;
+		animation: sweep ease-in-out 3s infinite;
+	}
+</style>

src/lib/components/kurosearch/results/Results.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
-	import { formatCount } from '$lib/logic/format-count';
 	import { getPostId } from '$lib/logic/id-utils';
 	import resultColumns from '$lib/store/result-columns-store';
 	import results from '$lib/store/results-store';
 	import FullscreenPost from '../fullscreen-post/FullscreenPost.svelte';
 	import MosaicPost from '../post/MosaicPost.svelte';
 	import SingleColumnPost from '../post/SingleColumnPost.svelte';
-	import SortFilterConfig from '../sort-filter-config/SortFilterConfig.svelte';
 
 	let fullscreenIndex: undefined | number;
 
@@ -28,11 +26,6 @@
 	}
 </script>
 
-<div>
-	<span>{formatCount($results.postCount)} posts</span>
-	<SortFilterConfig on:sortfilterupdate />
-</div>
-
 {#if $resultColumns === '1'}
 	<ol class="single-column">
 		{#each $results.posts as post, index}
@@ -62,21 +55,6 @@
 {/if}
 
 <style>
-	div {
-		width: 100%;
-		height: var(--line-height);
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		box-sizing: border-box;
-	}
-
-	@media (width <= calc(800px + 2rem)) {
-		div {
-			padding-inline: var(--small-gap);
-		}
-	}
-
 	.single-column {
 		width: 100%;
 		display: flex;

src/lib/logic/api-client/posts/posts.ts

@@ -14,7 +14,9 @@ export const getPage = async (pageNumber: number, tags: string) => {
 	throwOnUnexpectedStatus(response);
 
 	try {
-		const data = await response.json();
+		let data = await response.json();
+		data = data.filter((x: any) => x.change); // sometimes api returns placeholders that cause lots of null issues
+
 		const posts = data.map(parsePost) as kurosearch.Post[];
 
 		posts.forEach((post) => {

src/routes/+page.svelte

@@ -32,6 +32,7 @@
 	import CookieMessage from '$lib/components/kurosearch/cookie-message/CookieMessage.svelte';
 	import { addHistory } from '$lib/logic/use/onpopstate';
 	import { base } from '$app/paths';
+	import ResultHeader from '$lib/components/kurosearch/results/ResultHeader.svelte';
 
 	console.log(
 		'%ckurosearch\n%cHi, if you are reading this because you are debugging or reverse-engineering, feel free to send me a DM on Discord :)',
@@ -218,7 +219,11 @@
 	/>
 </section>
 
-{#if error}
+<ResultHeader on:sortfilterupdate {loading} />
+
+{#if loading}
+	<div />
+{:else if error}
 	<SearchError {error} />
 {:else if $results.requested}
 	<section>
@@ -278,4 +283,23 @@
 	:global(#btn-search) {
 		width: 10rem;
 	}
+
+	@keyframes sweep {
+		0% {
+			background: var(--background-1);
+		}
+		50% {
+			background: var(--background-2);
+		}
+		100% {
+			background: var(--background-1);
+		}
+	}
+
+	div {
+		contain: strict;
+		height: 100vh;
+		border-radius: calc(2 * var(--border-radius));
+		animation: sweep ease-in-out 3s infinite;
+	}
 </style>