diff --git a/ts/graphs/WithGraphData.svelte b/ts/graphs/WithGraphData.svelte
new file mode 100644
index 000000000..7c3af297a
--- /dev/null
+++ b/ts/graphs/WithGraphData.svelte
@@ -0,0 +1,31 @@
+<script lang="typescript">
+    import { writable } from "svelte/store";
+    import useAsync from "./async";
+    import useAsyncReactive from "./asyncReactive";
+
+    import { getGraphData, RevlogRange, daysToRevlogRange } from "./graph-helpers";
+    import { getPreferences } from "./preferences";
+
+    export let initialSearch: string;
+    export let initialDays: number;
+
+    const preferencesPromise = getPreferences();
+
+    const search = writable(initialSearch);
+    const days = writable(initialDays);
+
+    const sourceData = useAsyncReactive(() => getGraphData($search, $days), [search, days])
+    const preferences = useAsync(() => getPreferences())
+
+    $: revlogRange = daysToRevlogRange($days);
+</script>
+
+<slot
+     {search}
+     {days}
+     {revlogRange}
+     pending={$sourceData.pending || $preferences.pending}
+     sourceData={$sourceData.value}
+     preferences={$preferences.value}
+ >
+ </slot>
diff --git a/ts/graphs/asyncReactive.ts b/ts/graphs/asyncReactive.ts
index 5016c7227..d53c14895 100644
--- a/ts/graphs/asyncReactive.ts
+++ b/ts/graphs/asyncReactive.ts
@@ -27,6 +27,7 @@ function useAsyncReactive<T, E>(
         promise,
         ($promise, set: (error: E | null) => void) => {
             $promise.catch((error: E) => set(error));
+            return () => set(null);
         },
         null
     );