fix(stats): add a separate timing for measuring SSR time and latency …

…to that alongside API fetch

src/lib/components/header/stats.svelte

@@ -2,16 +2,18 @@
 	/**
 	 * @typedef {object} Props
 	 * @property {number} numOfResults
-	 * @property {number} timing
+	 * @property {number} timingRender
+	 * @property {number} timingApi
 	 */
 
 	/** @type {Props} */
-	let { numOfResults, timing } = $props();
-	const timingString = $derived((timing / 1000).toFixed(2));
+	let { numOfResults, timingRender, timingApi } = $props();
+	const timingRenderString = $derived((timingRender / 1000).toFixed(2));
+	const timingApiString = $derived((timingApi / 1000).toFixed(2));
 </script>
 
 <div id="stats" class="mx-auto px-2 pt-2 max-w-screen-sm">
 	<p class="text-sm text-neutral-800 dark:text-neutral-400">
-		Hearched {numOfResults} results in {timingString}s 🐹
+		Hearched {numOfResults} results in {timingRenderString}s (API took {timingApiString}s) 🐹
 	</p>
 </div>

src/routes/search/+page.js

@@ -9,6 +9,12 @@ export async function load({ data }) {
 		maxPages: data.maxPages,
 		category: data.category,
 		results: data.results,
-		timing: data.timing
+		timing: {
+			render: {
+				start: data.timing.render.start,
+				end: Date.now()
+			},
+			api: data.timing.api
+		}
 	};
 }

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

@@ -34,6 +34,8 @@ function getCategory(query, params) {
 
 /** @type {import('./$types').PageServerLoad} */
 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);
@@ -72,16 +74,25 @@ 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 {
 		query: queryWithoutCategory,
 		currentPage: currentPage,
 		maxPages: maxPages,
 		category: category,
 		results: results,
-		timing: timerEnd - timerStart
+		timing: {
+			render: {
+				start: renderStart,
+				end: Date.now()
+			},
+			api: {
+				start: fetchStart,
+				end: fetchEnd
+			}
+		}
 	};
 }

src/routes/search/+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}