Add a loading indication

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",

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",

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;
   }