fix(searchbad): stats

src/routes/searchbad/+page.js

@@ -35,6 +35,8 @@ function getCategory(query, params) {
 
 /** @type {import('./$types').PageLoad} */
 export async function load({ url, fetch }) {
+	const renderStart = Date.now();
+
 	// Get query, current page, and max pages from URL
 	const query = url.searchParams.get('q') ?? '';
 	const currentPage = parseInt(url.searchParams.get('start') ?? '1', 10);
@@ -73,9 +75,9 @@ export async function load({ url, fetch }) {
 	});
 
 	// Fetch results
-	const timerStart = Date.now();
+	const fetchStart = Date.now();
 	const results = await fetchResults(newSearchParams, fetch);
-	const timerEnd = Date.now();
+	const fetchEnd = Date.now();
 
 	return {
 		browser: browser,
@@ -84,6 +86,15 @@ export async function load({ url, fetch }) {
 		maxPages: maxPages,
 		category: category,
 		results: results,
-		timing: timerEnd - timerStart
+		timing: {
+			render: {
+				start: renderStart,
+				end: Date.now()
+			},
+			api: {
+				start: fetchStart,
+				end: fetchEnd
+			}
+		}
 	};
 }

src/routes/searchbad/+page.svelte

@@ -24,7 +24,8 @@
 	// const maxPages = $derived(data.maxPages);
 	const category = $derived(data.category);
 	const results = $derived(data.results);
-	const timing = $derived(data.timing);
+	const timingRender = $derived(data.timing.render.end - data.timing.render.start);
+	const timingApi = $derived(data.timing.api.end - data.timing.api.start);
 
 	/** @type {ResultType | undefined} */
 	let imagePreview = $state(undefined);
@@ -40,7 +41,7 @@
 
 <Header bind:query {category} />
 {#if results.length !== 0}
-	<Stats numOfResults={results.length} {timing} />
+	<Stats numOfResults={results.length} {timingRender} {timingApi} />
 {/if}
 
 {#if results.length === 0}