From 7b5e0134e5aabf786388d4ab5db513a014be083a Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 25 Dec 2020 21:49:56 +0100
Subject: [PATCH] Make spinner's position sticky in relation to graphsContainer

---
 ts/graphs/GraphsPage.svelte | 42 ++++++++++++++++++++++++-------------
 ts/graphs/graphs.scss       |  5 ++++-
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/ts/graphs/GraphsPage.svelte b/ts/graphs/GraphsPage.svelte
index 666ed065e..1f9c3c1ce 100644
--- a/ts/graphs/GraphsPage.svelte
+++ b/ts/graphs/GraphsPage.svelte
@@ -3,7 +3,8 @@
 </script>
 
 <script lang="typescript">
-    import { fade } from 'svelte/transition';
+    import { afterUpdate } from 'svelte';
+
     import type { I18n } from "anki/i18n";
     import type pb from "anki/backend_proto";
     import { getGraphData, RevlogRange } from "./graph-helpers";
@@ -81,6 +82,19 @@
         }
     };
 
+    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 = '';
+        }
+    })
+
     const year = i18n.tr(i18n.TR.STATISTICS_RANGE_1_YEAR_HISTORY);
     const deck = i18n.tr(i18n.TR.STATISTICS_RANGE_DECK);
     const collection = i18n.tr(i18n.TR.STATISTICS_RANGE_COLLECTION);
@@ -127,16 +141,16 @@
     <div class="range-box-pad" />
 {/if}
 
-{#await dataPromise}
-    <div class="spin" transition:fade="{{duration=50}}">◐</div>
-{:then sourceData}
-    <div tabindex="-1" class="no-focus-outline">
-        {#each graphs as Graph}
-            <Graph {sourceData} {revlogRange} {i18n} {nightMode} />
-        {/each}
-    </div>
-{:catch error}
-    <script>
-        alert({i18n.tr(i18n.TR.STATISTICS_ERROR_FETCHING)});
-    </script>
-{/await}
+<div bind:this={graphsContainer} tabindex="-1" class="no-focus-outline">
+    {#await dataPromise}
+        <div bind:this={spinner} class="spin">◐</div>
+    {:then sourceData}
+            {#each graphs as Graph}
+                <Graph {sourceData} {revlogRange} {i18n} {nightMode} />
+            {/each}
+    {:catch error}
+        <script>
+            alert({i18n.tr(i18n.TR.STATISTICS_ERROR_FETCHING)});
+        </script>
+    {/await}
+</div>
diff --git a/ts/graphs/graphs.scss b/ts/graphs/graphs.scss
index 01e7719f0..fd5bf9d8a 100644
--- a/ts/graphs/graphs.scss
+++ b/ts/graphs/graphs.scss
@@ -144,7 +144,10 @@
 }
 
 .spin {
-    position: absolute;
+    position: sticky;
+    left: 50%;
+    top: 50%;
+
     animation: spin;
     animation-duration: 1s;
     animation-iteration-count: infinite;