diff --git a/src/lib/components/event/event-history-timeline.svelte b/src/lib/components/event/event-history-timeline.svelte
index d04a8f37e..e3f940446 100644
--- a/src/lib/components/event/event-history-timeline.svelte
+++ b/src/lib/components/event/event-history-timeline.svelte
@@ -4,6 +4,7 @@
 
   import Accordion from '$lib/holocene/accordion.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import Loading from '$lib/holocene/loading.svelte';
   import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
   import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -197,12 +198,17 @@
     $workflowRun.workflow &&
     history.length &&
     visualizationRef;
+
+  const drawTimeline = () => {
+    if (timeline) {
+      timeline.destroy();
+    }
+    buildTimeline(category);
+  };
+
   $: {
     if (readyToDraw) {
-      if (timeline) {
-        timeline.destroy();
-      }
-      buildTimeline(category);
+      drawTimeline();
     }
   }
 </script>
@@ -221,20 +227,24 @@
         <ToggleButtons>
           <ToggleButton
             data-testid="zoom-in"
-            on:click={() => timeline.zoomIn(1)}>+</ToggleButton
+            on:click={() => timeline?.zoomIn(1)}>+</ToggleButton
           >
           <ToggleButton
             data-testid="zoom-in"
-            on:click={() => timeline.zoomOut(1)}>-</ToggleButton
+            on:click={() => timeline?.zoomOut(1)}>-</ToggleButton
           >
           <ToggleButton
             data-testid="zoom-in"
-            on:click={() => timeline.focus('workflow')}>Fit</ToggleButton
+            on:click={() => timeline?.focus('workflow')}>Fit</ToggleButton
           >
         </ToggleButtons>
       </div>
     </div>
-    <div class="timeline" bind:this={visualizationRef} />
+    <div class="timeline" bind:this={visualizationRef}>
+      {#if !timeline}
+        <Loading title="Building Timeline..." />
+      {/if}
+    </div>
   </div>
 </Accordion>
 
diff --git a/src/lib/components/event/event-summary.svelte b/src/lib/components/event/event-summary.svelte
index 96fc1b0fd..d066b325b 100644
--- a/src/lib/components/event/event-summary.svelte
+++ b/src/lib/components/event/event-summary.svelte
@@ -1,21 +1,13 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-
   import EventSummaryRow from '$lib/components/event/event-summary-row.svelte';
   import EventSummaryTable from '$lib/components/event/event-summary-table.svelte';
   import Pagination from '$lib/holocene/pagination.svelte';
   import { translate } from '$lib/i18n/translate';
   import { groupEvents } from '$lib/models/event-groups';
   import { CATEGORIES } from '$lib/models/event-history/get-event-categorization';
-  import { fetchAllEvents } from '$lib/services/events-service';
-  import {
-    eventFilterSort,
-    type EventSortOrder,
-    expandAllEvents,
-  } from '$lib/stores/event-view';
+  import { eventFilterSort, expandAllEvents } from '$lib/stores/event-view';
   import { eventHistory, fullEventHistory } from '$lib/stores/events';
   import { eventCategoryFilter } from '$lib/stores/filters';
-  import { refresh } from '$lib/stores/workflow-run';
   import type {
     CommonHistoryEvent,
     EventTypeCategory,
@@ -27,33 +19,6 @@
 
   export let compact = false;
 
-  $: ({ namespace, workflow: workflowId, run: runId } = $page.params);
-
-  let loading = true;
-
-  const resetFullHistory = () => {
-    $fullEventHistory = [];
-    loading = true;
-  };
-
-  const fetchEvents = async (
-    namespace: string,
-    workflowId: string,
-    runId: string,
-    sort: EventSortOrder,
-  ) => {
-    resetFullHistory();
-    $fullEventHistory = await fetchAllEvents({
-      namespace,
-      workflowId,
-      runId,
-      sort: compact ? 'ascending' : sort,
-    });
-    loading = false;
-  };
-
-  $: $refresh, fetchEvents(namespace, workflowId, runId, $eventFilterSort);
-
   function handleExpandChange(event: CustomEvent) {
     $expandAllEvents = event.detail.expanded;
   }
@@ -112,7 +77,7 @@
         onRowClick={() => setActiveRowIndex(index)}
       />
     {:else}
-      <EventEmptyRow {loading} />
+      <EventEmptyRow />
     {/each}
   </EventSummaryTable>
 </Pagination>
diff --git a/src/lib/components/workflow/workflow-json-navigator.svelte b/src/lib/components/workflow/workflow-json-navigator.svelte
index 1e1b55dba..bac0adb27 100644
--- a/src/lib/components/workflow/workflow-json-navigator.svelte
+++ b/src/lib/components/workflow/workflow-json-navigator.svelte
@@ -83,7 +83,7 @@
     <slot name="decode" />
   </div>
   {#if decodeEventHistory}
-    {#key index}
+    {#key [index, decodeEventHistory]}
       <PayloadDecoder value={events[index - 1]} let:decodedValue>
         <CodeBlock
           content={decodedValue}
diff --git a/src/lib/layouts/workflow-history-layout.svelte b/src/lib/layouts/workflow-history-layout.svelte
index 83377a631..ec69cf0ad 100644
--- a/src/lib/layouts/workflow-history-layout.svelte
+++ b/src/lib/layouts/workflow-history-layout.svelte
@@ -13,16 +13,22 @@
   import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
   import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
   import { translate } from '$lib/i18n/translate';
-  import { eventViewType } from '$lib/stores/event-view';
+  import { fetchAllEvents } from '$lib/services/events-service';
+  import {
+    eventFilterSort,
+    type EventSortOrder,
+    eventViewType,
+  } from '$lib/stores/event-view';
   import { eventHistory, fullEventHistory } from '$lib/stores/events';
   import { namespaces } from '$lib/stores/namespaces';
-  import { workflowRun } from '$lib/stores/workflow-run';
+  import { refresh, workflowRun } from '$lib/stores/workflow-run';
   import type { EventView } from '$lib/types/events';
   import { decodeURIForSvelte } from '$lib/utilities/encode-uri';
   import { exportHistory } from '$lib/utilities/export-history';
   import { getWorkflowStartedCompletedAndTaskFailedEvents } from '$lib/utilities/get-started-completed-and-task-failed-events';
   import { getWorkflowRelationships } from '$lib/utilities/get-workflow-relationships';
 
+  $: ({ namespace, workflow: workflowId, run: runId } = $page.params);
   let showShortcuts = false;
 
   $: workflowEvents =
@@ -35,6 +41,29 @@
     $namespaces,
   );
 
+  const resetFullHistory = () => {
+    $fullEventHistory = [];
+  };
+
+  const fetchEvents = async (
+    namespace: string,
+    workflowId: string,
+    runId: string,
+    view: EventView,
+    sort: EventSortOrder,
+  ) => {
+    resetFullHistory();
+    $fullEventHistory = await fetchAllEvents({
+      namespace,
+      workflowId,
+      runId,
+      sort: view === 'compact' ? 'ascending' : sort,
+    });
+  };
+
+  $: $refresh,
+    fetchEvents(namespace, workflowId, runId, $eventViewType, $eventFilterSort);
+
   const onViewClick = (view: EventView) => {
     if ($page.url.searchParams.get('page')) {
       $page.url.searchParams.delete('page');
diff --git a/src/lib/pages/workflow-history-json.svelte b/src/lib/pages/workflow-history-json.svelte
index 7afc4a17c..b41b7b9a5 100644
--- a/src/lib/pages/workflow-history-json.svelte
+++ b/src/lib/pages/workflow-history-json.svelte
@@ -1,28 +1,12 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-
   import WorkflowJsonNavigator from '$lib/components/workflow/workflow-json-navigator.svelte';
   import ToggleSwitch from '$lib/holocene/toggle-switch.svelte';
-  import { fetchRawEvents } from '$lib/services/events-service';
-  import { decodeURIForSvelte } from '$lib/utilities/encode-uri';
-
-  const { namespace, workflow: workflowId, run: runId } = $page.params;
+  import { fullEventHistory } from '$lib/stores/events';
 
   let decodeEventHistory = true;
-  let events = [];
-
-  const fetchEvents = async () => {
-    events = await fetchRawEvents({
-      namespace: decodeURIForSvelte(namespace),
-      workflowId: decodeURIForSvelte(workflowId),
-      runId: decodeURIForSvelte(runId),
-      sort: 'ascending',
-    });
-  };
-  $: decodeEventHistory, fetchEvents();
 </script>
 
-<WorkflowJsonNavigator {events} {decodeEventHistory}>
+<WorkflowJsonNavigator events={$fullEventHistory} {decodeEventHistory}>
   <ToggleSwitch
     slot="decode"
     label="View decoded event history"