mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-21 21:53:30 +00:00
add spinner during loading
This commit is contained in:
parent
48f605dbe0
commit
d545becf24
@ -617,7 +617,7 @@ a:not(.button) {
|
||||
|
||||
|
||||
.select2 {
|
||||
margin: 0;
|
||||
margin: 10px 0!important;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
|
||||
|
@ -140,6 +140,11 @@
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
|
||||
&.loader {
|
||||
margin-top: 10px;
|
||||
--loading-size: 20px
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
max-width: calc(50% - 5px);
|
||||
}
|
||||
|
@ -4,6 +4,7 @@ document.addEventListener("alpine:init", () => {
|
||||
selector: undefined,
|
||||
|
||||
async init() {
|
||||
this.loading = true;
|
||||
this.identifications = await (
|
||||
await fetch(`/api/sas/picture/${picture_id}/identified`)
|
||||
).json();
|
||||
@ -15,9 +16,11 @@ document.addEventListener("alpine:init", () => {
|
||||
}),
|
||||
picture_getter: (user) => user.profile_pict,
|
||||
});
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
async submit_identification() {
|
||||
this.loading = true;
|
||||
const url = `/api/sas/picture/${picture_id}/identified`;
|
||||
await fetch(url, {
|
||||
method: "PUT",
|
||||
@ -26,6 +29,7 @@ document.addEventListener("alpine:init", () => {
|
||||
// refresh the identified users list
|
||||
this.identifications = await (await fetch(url)).json();
|
||||
this.selector.empty().trigger("change");
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
can_be_removed(item) {
|
||||
@ -33,6 +37,7 @@ document.addEventListener("alpine:init", () => {
|
||||
},
|
||||
|
||||
async remove(item) {
|
||||
this.loading = true;
|
||||
const res = await fetch(`/api/sas/relation/${item.id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
@ -41,6 +46,7 @@ document.addEventListener("alpine:init", () => {
|
||||
(i) => i.id !== item.id,
|
||||
);
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
@ -128,14 +128,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tags" x-data="user_identification" x-cloak>
|
||||
<div class="tags" x-data="user_identification">
|
||||
<h5>{% trans %}People{% endtrans %}</h5>
|
||||
{% if user.was_subscribed %}
|
||||
<form @submit.prevent="submit_identification" >
|
||||
{% csrf_token %}
|
||||
<form @submit.prevent="submit_identification" x-show="!!selector">
|
||||
<select x-ref="search" multiple="multiple"></select>
|
||||
<input type="submit" value="{% trans %}Go{% endtrans %}"/>
|
||||
</form>{% endif %}
|
||||
</form>
|
||||
{% endif %}
|
||||
<ul>
|
||||
<template x-for="identification in identifications" :key="identification.id">
|
||||
<li>
|
||||
@ -148,6 +148,9 @@
|
||||
</template>
|
||||
</li>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<li class="loader" aria-busy="true"></li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user