Merge pull request 'Add a loading indication' (#36) from thubrecht/spinner into master
Reviewed-on: https://git.rz.ens.wtf/Klub-RZ/metis/pulls/36
This commit is contained in:
commit
978d8626b7
13
package-lock.json
generated
13
package-lock.json
generated
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue