From c7cc8dcd84ee6290a831e951f863fff3b91122a1 Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom.hubrecht@ens.fr>
Date: Wed, 27 Jul 2022 17:37:34 +0200
Subject: [PATCH] Add a loading indication

---
 package-lock.json | 13 +++++++++++++
 package.json      |  3 ++-
 src/App.svelte    | 22 ++++++++++++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 85014fd..161ee3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,6 +45,7 @@
         "rollup-plugin-terser": "^7.0.0",
         "svelte": "^3.0.0",
         "svelte-fullcalendar": "^1.1.1",
+        "svelte-loading-spinners": "^0.1.7",
         "svelte-reactive-preprocessor": "^0.8.0",
         "sveltestrap": "^5.9.0"
       }
@@ -3771,6 +3772,12 @@
         "@fullcalendar/interaction": "^5.0.0"
       }
     },
+    "node_modules/svelte-loading-spinners": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.1.7.tgz",
+      "integrity": "sha512-EKCId1DjVL2RSUVJJsvtNcqQHox03XIgh4xh/4p7r6ST7d8mut6INY9/LqK4A17PFU64+3quZmqiSfOlf480CA==",
+      "dev": true
+    },
     "node_modules/svelte-reactive-preprocessor": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/svelte-reactive-preprocessor/-/svelte-reactive-preprocessor-0.8.2.tgz",
@@ -6840,6 +6847,12 @@
         "@fullcalendar/interaction": "^5.0.0"
       }
     },
+    "svelte-loading-spinners": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.1.7.tgz",
+      "integrity": "sha512-EKCId1DjVL2RSUVJJsvtNcqQHox03XIgh4xh/4p7r6ST7d8mut6INY9/LqK4A17PFU64+3quZmqiSfOlf480CA==",
+      "dev": true
+    },
     "svelte-reactive-preprocessor": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/svelte-reactive-preprocessor/-/svelte-reactive-preprocessor-0.8.2.tgz",
diff --git a/package.json b/package.json
index 0d0ef67..eeaaf12 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "rollup-plugin-terser": "^7.0.0",
     "svelte": "^3.0.0",
     "svelte-fullcalendar": "^1.1.1",
+    "svelte-loading-spinners": "^0.1.7",
     "svelte-reactive-preprocessor": "^0.8.0",
     "sveltestrap": "^5.9.0"
   },
@@ -37,8 +38,8 @@
     "@fullcalendar/list": "^5.10.1",
     "@fullcalendar/resource-timeline": "^5.10.1",
     "@fullcalendar/rrule": "^5.10.1",
-    "@rollup/plugin-replace": "^4.0.0",
     "@nextcloud/cdav-library": "^1.0.0",
+    "@rollup/plugin-replace": "^4.0.0",
     "bootstrap": "^5.1.3",
     "bootstrap-icons": "^1.8.1",
     "ical.js": "^1.5.0",
diff --git a/src/App.svelte b/src/App.svelte
index 8b31922..cba1a8a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   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';
@@ -37,6 +38,8 @@
     return time.toLocaleTimeString();
   })();
 
+  let isLoading = true;
+
   const allowedViews = [
     'resourceTimelineDay',
     'dayGridMonth',
@@ -115,6 +118,7 @@
       month: mobile ? 'numeric' : 'long',
       day: 'numeric'
     },
+    loading: b => (isLoading = b),
     eventSources: [],
     themeSystem: 'bootstrap5',
     nextDayThreshold: '05:00:00',
@@ -161,6 +165,14 @@
   $: 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>
 
@@ -175,6 +187,16 @@
 </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;
   }