From 8e5d9bb657817b4c17e3901e2f8e97ab0eab1f96 Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom.hubrecht@ens.fr>
Date: Thu, 28 Jul 2022 14:16:52 +0200
Subject: [PATCH] Move spinner to its own file, and only mask the current view,
 not the whole window

---
 src/App.svelte     | 37 ++++++++++++++++---------------------
 src/Spinner.svelte | 25 +++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 21 deletions(-)
 create mode 100644 src/Spinner.svelte

diff --git a/src/App.svelte b/src/App.svelte
index 34972f5..78eda8d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,6 @@
 <script>
   import { writable } from 'svelte/store';
   import FullCalendar from 'svelte-fullcalendar';
-  import { Circle2 } from 'svelte-loading-spinners';
   import timeGridPlugin from '@fullcalendar/timegrid';
   import adaptivePlugin from '@fullcalendar/adaptive';
   import rrulePlugin from '@fullcalendar/rrule';
@@ -15,6 +14,7 @@
   import { debounce } from 'lodash';
   import Help from './Help.svelte';
   import Share from './Share.svelte';
+  import Spinner from './Spinner.svelte';
 
   import 'bootstrap/dist/css/bootstrap.css';
   import 'bootstrap-icons/font/bootstrap-icons.css';
@@ -69,6 +69,7 @@
       };
 
   let calendar;
+  let spinner;
 
   let options = writable({
     initialView: allowedViews.includes(view)
@@ -115,7 +116,12 @@
       month: mobile ? 'numeric' : 'long',
       day: 'numeric'
     },
-    loading: b => (isLoading = b),
+    loading: b => {
+      isLoading = b;
+      if (spinner) {
+        spinner.$set({ isLoading: b });
+      }
+    },
     eventSources: [],
     themeSystem: 'bootstrap5',
     nextDayThreshold: '05:00:00',
@@ -126,7 +132,14 @@
         title: info.event.extendedProps.short_name,
         placement: 'top'
       });
-    }
+    },
+    viewDidMount: arg => {
+      spinner = new Spinner({
+        target: arg.el,
+        props: { isLoading: isLoading }
+      });
+    },
+    viewWillUnmount: _ => spinner.$destroy()
   });
 
   const flatten = d => {
@@ -162,14 +175,6 @@
   $: updateEvents(selectedCalendars);
 </script>
 
-{#if isLoading}
-  <div class="load-spinner">
-    <div class="position-absolute top-50 start-50">
-      <Circle2 colorOuter="#e658ea" colorInner="#eaac3f" />
-    </div>
-  </div>
-{/if}
-
 <div class="h-100 d-flex flex-column">
   <h1 class="mt-3 title text-center">Calendrier de la vie étudiante à l'ENS</h1>
 
@@ -184,16 +189,6 @@
 </div>
 
 <style>
-  .load-spinner {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.7);
-    z-index: 1044;
-  }
-
   :global(.fs-7) {
     font-size: 0.9rem !important;
   }
diff --git a/src/Spinner.svelte b/src/Spinner.svelte
new file mode 100644
index 0000000..f5aeb35
--- /dev/null
+++ b/src/Spinner.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { Circle2 } from 'svelte-loading-spinners';
+
+  export let isLoading = false;
+</script>
+
+{#if isLoading}
+  <div class="load-spinner">
+    <div class="position-absolute top-50 start-50">
+      <Circle2 colorOuter="#e658ea" colorInner="#eaac3f" />
+    </div>
+  </div>
+{/if}
+
+<style>
+  .load-spinner {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 50;
+  }
+</style>