ecoppens/metis
1
0
Fork 0
forked from DGNum/metis
Code Pull requests Activity

Add a loading indication

Browse source
This commit is contained in:
Tom Hubrecht 2022-07-27 17:37:34 +02:00
parent 8ba44c472f
commit c7cc8dcd84
3 changed files with 37 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
package-lock.json generated
View file

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

3
package.json
View file

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

22
src/App.svelte
View file

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