From 3f34ffcafce93a057ec21033be262a6fa1933d4f Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Mon, 10 Oct 2022 13:51:37 +0200
Subject: [PATCH] load match log asynchronously

---
 .../src/routes/matches/[match_id].svelte        | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/web/pw-server/src/routes/matches/[match_id].svelte b/web/pw-server/src/routes/matches/[match_id].svelte
index 7c1507c..11d6ee3 100644
--- a/web/pw-server/src/routes/matches/[match_id].svelte
+++ b/web/pw-server/src/routes/matches/[match_id].svelte
@@ -4,14 +4,10 @@
     try {
       const matchId = params["match_id"];
       const apiClient = new ApiClient(fetch);
-      const [matchData, matchLog] = await Promise.all([
-        apiClient.get(`/api/matches/${matchId}`),
-        apiClient.getText(`/api/matches/${matchId}/log`),
-      ]);
+      const matchData = await apiClient.get(`/api/matches/${matchId}`);
       return {
         props: {
-          matchData: matchData,
-          matchLog: matchLog,
+          matchData,
         },
       };
     } catch (error) {
@@ -24,9 +20,16 @@
 </script>
 
 <script lang="ts">
+  import { onMount } from "svelte";
   import Visualizer from "$lib/components/Visualizer.svelte";
-  export let matchLog: string;
+
+  export let matchLog: string | undefined;
   export let matchData: object;
+
+  onMount(async () => {
+    const apiClient = new ApiClient();
+    matchLog = await apiClient.getText(`/api/matches/${matchData["id"]}/log`);
+  });
 </script>
 
 <div class="container">