Merge pull request 'Only show the loading on the view' (#41) from thubrecht/share into master

Reviewed-on: https://git.rz.ens.wtf/Klub-RZ/metis/pulls/41

package-lock.json

@@ -32,6 +32,7 @@
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^11.0.0",
         "@rollup/plugin-replace": "^4.0.0",
+        "@types/bootstrap": "^5.2.0",
         "dav": "^1.8.0",
         "postcss": "^8.3.11",
         "prettier": "^2.4.1",
@@ -608,6 +609,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@types/bootstrap": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.0.tgz",
+      "integrity": "sha512-zncxyEdbShnbOkY1zGBNqvpdVuIGDEA3rxcANJ4v9b3yaMxp+xDCNSwrXK5+uM7Wz7cb1RoIoRUQ0Q5JyfjyfA==",
+      "dev": true,
+      "dependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
@@ -4530,6 +4540,15 @@
       "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
       "dev": true
     },
+    "@types/bootstrap": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.0.tgz",
+      "integrity": "sha512-zncxyEdbShnbOkY1zGBNqvpdVuIGDEA3rxcANJ4v9b3yaMxp+xDCNSwrXK5+uM7Wz7cb1RoIoRUQ0Q5JyfjyfA==",
+      "dev": true,
+      "requires": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "@types/estree": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",

package.json

@@ -15,6 +15,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
     "@rollup/plugin-replace": "^4.0.0",
+    "@types/bootstrap": "^5.2.0",
     "dav": "^1.8.0",
     "postcss": "^8.3.11",
     "prettier": "^2.4.1",

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

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>