Move spinner back to RangeBox

ts/graphs/GraphsPage.svelte

@@ -4,7 +4,6 @@
 
 <script lang="typescript">
     import RangeBox from './RangeBox.svelte'
-    import { afterUpdate } from 'svelte';
 
     import type { I18n } from "anki/i18n";
     import type pb from "anki/backend_proto";
@@ -18,50 +17,40 @@
     export let days: number;
     export let withRangeBox: boolean;
 
-    let dataPromise: Promise<pb.backend.GraphsOut>;
+    let sourceData: pb.BackendProto.GraphsOut | null = null;
     let revlogRange: RevlogRange;
 
-    const refreshWith = (search, days, revlogRange) => {
+    const refreshWith = async (search: string, days: number) => {
-        dataPromise = getGraphData(search, days);
+        try {
+            sourceData = await getGraphData(search, days);
             revlogRange = days > 365
                 ? RevlogRange.All
                 : RevlogRange.Year;
+        } catch (e) {
+            sourceData = null;
+            alert(i18n.tr(i18n.TR.STATISTICS_ERROR_FETCHING));
+        }
     }
 
-    const refresh = (event) => {
+    let active = false;
+
+    const refresh = (event: CustomEvent) => {
+        active = true;
         refreshWith(event.detail.search, event.detail.days)
+        active = false;
     }
 
     refreshWith(search, days)
-
-    let spinner: HTMLDivElement;
-    let graphsContainer: HTMLDivElement;
-
-    afterUpdate(() => {
-        // make sure graph container retains its size for spinner
-        if (spinner) {
-            graphsContainer.style.minHeight = `${document.documentElement.scrollHeight}px`;
-        }
-        else {
-            graphsContainer.style.minHeight = '';
-        }
-    })
 </script>
 
 {#if withRangeBox}
-    <RangeBox {i18n} {search} {days} on:update={refresh} />
+    <RangeBox {i18n} {search} {days} {active} on:update={refresh} />
 {/if}
 
-<div bind:this={graphsContainer} tabindex="-1" class="no-focus-outline">
+{#if sourceData}
-    {#await dataPromise}
+    <div tabindex="-1" class="no-focus-outline">
-        <div bind:this={spinner} class="spin">◐</div>
-    {:then sourceData}
         {#each graphs as Graph}
             <Graph {sourceData} {revlogRange} {i18n} {nightMode} />
         {/each}
-    {:catch error}
+    </div>
-        <script>
+{/if}
-            alert({i18n.tr(i18n.TR.STATISTICS_ERROR_FETCHING)});
-        </script>
-    {/await}
-</div>

ts/graphs/RangeBox.svelte

@@ -1,6 +1,7 @@
 <script lang="typescript">
     import { createEventDispatcher } from 'svelte';
 
+    import type { I18n } from "anki/i18n";
     import { RevlogRange } from "./graph-helpers";
 
     enum SearchRange {
@@ -10,14 +11,23 @@
     }
 
     export let i18n: I18n;
+    export let active: boolean;
+
+    export let days: number;
+    export let search: string;
 
     const dispatch = createEventDispatcher();
 
-    let revlogRange: RevlogRange = RevlogRange.Year;
+    let revlogRange: RevlogRange = days <= 365
-    let searchRange: SearchRange = SearchRange.Deck;
+        ? RevlogRange.Year
+        : RevlogRange.All;
+
+    let searchRange: SearchRange = search === "deck:current"
+        ? SearchRange.Deck
+        : search === ""
+        ? SearchRange.Collection
+        : SearchRange.Custom;
 
-    let days;
-    let search;
     let displayedSearch = search;
 
     const update = () => {
@@ -71,6 +81,8 @@
 
 
 <div class="range-box">
+    <div class="spin" class:active>◐</div>
+
     <div class="range-box-inner">
         <label>
             <input type="radio" bind:group={searchRange} value={SearchRange.Deck} />

ts/graphs/graphs.scss

@@ -144,16 +144,18 @@
 }
 
 .spin {
-    position: sticky;
+    position: absolute;
-    left: 50%;
-    top: 50%;
-
     animation: spin;
     animation-duration: 1s;
     animation-iteration-count: infinite;
     display: inline-block;
     font-size: 2em;
+    opacity: 0;
+}
+
+.spin.active {
     opacity: 0.5;
+    transition: opacity 1s;
 }
 
 .legend-outer {