Remove pending, and resort to checking for value

- once value is set, it won't be unset

ts/graphs/GraphsPage.svelte

@@ -15,7 +15,7 @@
     export let initialDays: number;
     export let controller: SvelteComponent | null;
 
-    const browserSearch = (search: string, query: string) => {
+    const browserSearch = (search: string, query: string): void => {
         bridgeCommand(`browserSearch:${search} ${query}`);
     };
 </script>
@@ -34,7 +34,6 @@
         {initialDays}
         let:search
         let:days
-        let:pending
         let:loading
         let:sourceData
         let:preferences
@@ -43,7 +42,7 @@
             <svelte:component this={controller} {i18n} {search} {days} {loading} />
         {/if}
 
-        {#if !pending}
+        {#if sourceData && preferences && revlogRange}
             {#each graphs as graph}
                 <svelte:component
                     this={graph}

ts/graphs/WithGraphData.svelte

@@ -14,8 +14,8 @@
     const days = writable(initialDays);
 
     const {
-        pending: graphPending,
         loading: graphLoading,
+        error: graphError,
         value: graphValue,
     } = useAsyncReactive(() => getGraphData($search, $days), [
         search,
@@ -24,19 +24,30 @@
 
     const preferencesPromise = getPreferences();
     const {
-        pending: prefsPending,
         loading: prefsLoading,
+        error: prefsError,
         value: prefsValue,
     } = useAsync(() => preferencesPromise);
 
     $: revlogRange = daysToRevlogRange($days);
+
+    $: {
+        if ($graphError) {
+            alert($graphError)
+        }
+    }
+
+    $: {
+        if ($prefsError) {
+            alert($prefsError)
+        }
+    }
 </script>
 
 <slot
     {search}
     {days}
     {revlogRange}
-    pending={$graphPending || $prefsPending}
     loading={$graphLoading || $prefsLoading}
     sourceData={$graphValue}
     preferences={$prefsValue} />

ts/graphs/async.ts

@@ -3,7 +3,7 @@ import { Readable, readable, derived } from "svelte/store";
 interface AsyncData<T, E> {
     value: Readable<T | null>;
     error: Readable<E | null>;
-    pending: Readable<boolean>;
+    loading: Readable<boolean>;
     success: Readable<boolean>;
 }
 
@@ -18,13 +18,13 @@ function useAsync<T, E = unknown>(asyncFunction: () => Promise<T>): AsyncData<T,
         promise.catch((value: E) => set(value));
     });
 
-    const pending = readable(true, (set: (value: boolean) => void) => {
+    const loading = readable(true, (set: (value: boolean) => void) => {
         promise.finally(() => set(false));
     });
 
     const success = derived([value], (_, set) => set(true), false);
 
-    return { value, error, pending, success };
+    return { value, error, loading, success };
 }
 
 export default useAsync;

ts/graphs/asyncReactive.ts

@@ -1,9 +1,8 @@
-import { Readable, readable, derived } from "svelte/store";
+import { Readable, derived } from "svelte/store";
 
 interface AsyncReativeData<T, E> {
     value: Readable<T | null>;
     error: Readable<E | null>;
-    pending: Readable<boolean>;
     loading: Readable<boolean>;
     success: Readable<boolean>;
 }
@@ -17,7 +16,7 @@ function useAsyncReactive<T, E>(
 
     const value = derived(
         promise,
-        ($promise, set: (value: T | null) => void) => {
+        ($promise, set: (value: T) => void) => {
             $promise.then((value: T) => set(value));
         },
         null
@@ -32,10 +31,6 @@ function useAsyncReactive<T, E>(
         null
     );
 
-    const pending = readable(true, (set: (value: boolean) => void) => {
-        initial.finally(() => set(false));
-    });
-
     const loading = derived(
         [value, error],
         (_, set: (value: boolean) => void) => {
@@ -54,7 +49,7 @@ function useAsyncReactive<T, E>(
         false
     );
 
-    return { value, error, pending, loading, success };
+    return { value, error, loading, success };
 }
 
 export default useAsyncReactive;