add spinner during loading

This commit is contained in:
thomas girod 2024-08-09 17:06:35 +02:00
parent 48f605dbe0
commit d545becf24
4 changed files with 21 additions and 7 deletions

View File

@ -617,7 +617,7 @@ a:not(.button) {
.select2 {
margin: 0;
margin: 10px 0!important;
max-width: 100%;
min-width: 100%;

View File

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

View File

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

View File

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