Only decode on onMount to prevent overfetching payloads (#2750)

Author: Alex-Tideman

src/lib/components/event/payload-decoder.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
+
   import { page } from '$app/stores';
 
   import { authUser } from '$lib/stores/auth-user';
@@ -27,22 +29,22 @@
   let keyedValue = key && value?.[key] ? value[key] : value;
   let decodedValue = stringifyWithBigInt(keyedValue);
 
-  $: endpoint = getCodecEndpoint($page.data.settings);
-  $: passAccessToken = getCodecPassAccessToken($page.data.settings);
-  $: includeCredentials = getCodecIncludeCredentials($page.data.settings);
-  $: settings = {
-    ...$page.data.settings,
-    codec: {
-      ...$page.data.settings?.codec,
-      endpoint,
-      passAccessToken,
-      includeCredentials,
-    },
-  };
+  onMount(() => {
+    decodePayloads(value);
+  });
 
   const decodePayloads = async (
     _value: PotentiallyDecodable | EventAttribute | WorkflowEvent | Memo,
   ) => {
+    const settings = {
+      ...$page.data.settings,
+      codec: {
+        ...$page.data.settings?.codec,
+        endpoint: getCodecEndpoint($page.data.settings),
+        passAccessToken: getCodecPassAccessToken($page.data.settings),
+        includeCredentials: getCodecIncludeCredentials($page.data.settings),
+      },
+    };
     try {
       const convertedAttributes = await cloneAllPotentialPayloadsWithCodec(
         _value,
@@ -66,8 +68,6 @@
       console.error('Could not decode payloads');
     }
   };
-
-  $: decodePayloads(value);
 </script>
 
 <slot {decodedValue} />