From afe67b8c177d41d9985595af24c59fb3ad10972d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aleksa=20Siri=C5=A1ki?=
 <31509435+aleksasiriski@users.noreply.github.com>
Date: Tue, 14 May 2024 17:06:51 +0200
Subject: [PATCH] fix(stats): add a separate timing for measuring SSR time and
 latency to that alongside API fetch

---
 src/lib/components/header/stats.svelte | 10 ++++++----
 src/routes/search/+page.js             |  8 +++++++-
 src/routes/search/+page.server.js      | 17 ++++++++++++++---
 src/routes/search/+page.svelte         |  5 +++--
 4 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/header/stats.svelte b/src/lib/components/header/stats.svelte
index 08fe4c97..2da1f0e7 100644
--- a/src/lib/components/header/stats.svelte
+++ b/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>
diff --git a/src/routes/search/+page.js b/src/routes/search/+page.js
index b1c4cd5e..ce4ccedd 100644
--- a/src/routes/search/+page.js
+++ b/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
+		}
 	};
 }
diff --git a/src/routes/search/+page.server.js b/src/routes/search/+page.server.js
index 274c48d9..53c6c571 100644
--- a/src/routes/search/+page.server.js
+++ b/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,9 +74,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 {
 		query: queryWithoutCategory,
@@ -82,6 +84,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
+			}
+		}
 	};
 }
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index 2856bca0..d2b8cb62 100644
--- a/src/routes/search/+page.svelte
+++ b/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}