feat: api fetch time

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index efa4d0018f64b3c91c12f3cc3dd2fef4ed25d60c..ce5a5960a002a3a1695d04a186e7b0736b43a6b1 100644 (file)
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -19,11 +19,14 @@ SPDX-License-Identifier: GPL-3.0-only -->
   import { onMount } from "svelte";
   import { fetchRandomImage } from "$lib/api";
 
-  let image;
+  let image, fetchTime;
   let complete = false;
 
   onMount(async () => {
+    fetchTime = performance.now();
     image = (await fetchRandomImage()).image;
+    fetchTime = performance.now() - fetchTime;
+
     complete = true;
   });
 </script>
@@ -46,6 +49,7 @@ SPDX-License-Identifier: GPL-3.0-only -->
         />
       </a>
     </div>
+    <small>Fetch time: {fetchTime}ms</small>
   {/if}
 
   <h2>Contributing</h2>

diff --git a/src/routes/language.svelte b/src/routes/language.svelte
index dacbf72449e2398767bddb14620a3c9331cde551..39f0c4cfd9881b94241376b782c583baab832228 100644 (file)
--- a/src/routes/language.svelte
+++ b/src/routes/language.svelte
@@ -21,11 +21,13 @@ SPDX-License-Identifier: GPL-3.0-only -->
   import { page } from "$app/stores";
 
   let language = $page.url.searchParams.get("language");
-  let images;
+  let images, fetchTime;
   let complete = false;
 
   onMount(async () => {
+    fetchTime = performance.now();
     images = await fetchImages(language);
+    fetchTime = performance.now() - fetchTime;
     complete = true;
   });
 </script>
@@ -54,5 +56,6 @@ SPDX-License-Identifier: GPL-3.0-only -->
         </li>
       {/each}
     </ul>
+    <small>Fetch time: {fetchTime}ms</small>
   {/if}
 </div>

diff --git a/src/routes/languages.svelte b/src/routes/languages.svelte
index 9f14e18c7370c3dd4b51151c01a354a79812053c..f8156ba84e7093b6de33e31863b1962068ec3b4b 100644 (file)
--- a/src/routes/languages.svelte
+++ b/src/routes/languages.svelte
@@ -18,11 +18,14 @@ SPDX-License-Identifier: GPL-3.0-only -->
 <script>
   import { onMount } from "svelte";
   import { fetchLanguages } from "$lib/api";
-  let languages;
+
+  let languages, fetchTime;
   let complete = false;
 
   onMount(async () => {
+    fetchTime = performance.now();
     languages = await fetchLanguages();
+    fetchTime = performance.now() - fetchTime;
     complete = true;
   });
 </script>
@@ -50,5 +53,6 @@ SPDX-License-Identifier: GPL-3.0-only -->
         </li>
       {/each}
     </ul>
+    <small>Fetch time: {fetchTime}ms</small>
   {/if}
 </div>