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
This commit is contained in:
tomate 2022-07-28 18:48:10 +02:00
commit 36723000b0
4 changed files with 61 additions and 21 deletions

19
package-lock.json generated
View file

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

View file

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

View file

@ -1,7 +1,6 @@
<script> <script>
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import FullCalendar from 'svelte-fullcalendar'; import FullCalendar from 'svelte-fullcalendar';
import { Circle2 } from 'svelte-loading-spinners';
import timeGridPlugin from '@fullcalendar/timegrid'; import timeGridPlugin from '@fullcalendar/timegrid';
import adaptivePlugin from '@fullcalendar/adaptive'; import adaptivePlugin from '@fullcalendar/adaptive';
import rrulePlugin from '@fullcalendar/rrule'; import rrulePlugin from '@fullcalendar/rrule';
@ -15,6 +14,7 @@
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import Help from './Help.svelte'; import Help from './Help.svelte';
import Share from './Share.svelte'; import Share from './Share.svelte';
import Spinner from './Spinner.svelte';
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-icons/font/bootstrap-icons.css'; import 'bootstrap-icons/font/bootstrap-icons.css';
@ -69,6 +69,7 @@
}; };
let calendar; let calendar;
let spinner;
let options = writable({ let options = writable({
initialView: allowedViews.includes(view) initialView: allowedViews.includes(view)
@ -115,7 +116,12 @@
month: mobile ? 'numeric' : 'long', month: mobile ? 'numeric' : 'long',
day: 'numeric' day: 'numeric'
}, },
loading: b => (isLoading = b), loading: b => {
isLoading = b;
if (spinner) {
spinner.$set({ isLoading: b });
}
},
eventSources: [], eventSources: [],
themeSystem: 'bootstrap5', themeSystem: 'bootstrap5',
nextDayThreshold: '05:00:00', nextDayThreshold: '05:00:00',
@ -126,7 +132,14 @@
title: info.event.extendedProps.short_name, title: info.event.extendedProps.short_name,
placement: 'top' placement: 'top'
}); });
} },
viewDidMount: arg => {
spinner = new Spinner({
target: arg.el,
props: { isLoading: isLoading }
});
},
viewWillUnmount: _ => spinner.$destroy()
}); });
const flatten = d => { const flatten = d => {
@ -162,14 +175,6 @@
$: updateEvents(selectedCalendars); $: updateEvents(selectedCalendars);
</script> </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"> <div class="h-100 d-flex flex-column">
<h1 class="mt-3 title text-center">Calendrier de la vie étudiante à l'ENS</h1> <h1 class="mt-3 title text-center">Calendrier de la vie étudiante à l'ENS</h1>
@ -184,16 +189,6 @@
</div> </div>
<style> <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) { :global(.fs-7) {
font-size: 0.9rem !important; font-size: 0.9rem !important;
} }

25
src/Spinner.svelte Normal file
View file

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