improved feedback when loading ajax content

sas/templates/sas/album.jinja

@@ -1,5 +1,4 @@
 {% extends "core/base.jinja" %}
-{% from "core/macros.jinja" import paginate %}
 
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ scss('sas/album.scss') }}">
@@ -62,7 +61,7 @@
 
   <div x-data="pictures">
     <h4>{% trans %}Pictures{% endtrans %}</h4>
-    <div class="photos">
+    <div class="photos" :aria-busy="loading">
       <template x-for="picture in pictures.results">
         <a :href="`/sas/picture/${picture.id}#pict`">
           <div class="photo" :style="`background-image: url(${picture.thumb_url})`">
@@ -81,13 +80,24 @@
       </template>
     </div>
     <nav class="pagination" x-show="nb_pages() > 1">
-      <button @click="page--" :disabled="page <= 1">
+      {# Adding the prevent here is important, because otherwise,
+      clicking on the pagination buttons could submit the picture management form
+      and reload the page #}
+      <button
+        @click.prevent="page--"
+        :disabled="page <= 1"
+        @keyup.right.window="page = Math.min(nb_pages(), page + 1)"
+      >
         <i class="fa fa-caret-left"></i>
       </button>
       <template x-for="i in nb_pages()">
-        <button x-text="i" @click="page = i":class="{active: page === i}"></button>
+        <button x-text="i" @click.prevent="page = i" :class="{active: page === i}"></button>
       </template>
-      <button @click="page++" :disabled="page >= nb_pages()">
+      <button
+        @click.prevent="page++"
+        :disabled="page >= nb_pages()"
+        @keyup.left.window="page = Math.max(1, page - 1)"
+      >
         <i class="fa fa-caret-right"></i>
       </button>
     </nav>
@@ -95,9 +105,6 @@
 
   {% if is_sas_admin %}
     </form>
-  {% endif %}
-
-  {% if user.is_in_group(pk=settings.SITH_GROUP_SAS_ADMIN_ID) %}
     <form class="add-files" id="upload_form" action="" method="post" enctype="multipart/form-data">
       {% csrf_token %}
       <div class="inputs">
@@ -122,18 +129,24 @@
       Alpine.data("pictures", () => ({
         pictures: {},
         page: parseInt(initialUrlParams.get("page")) || 1,
+        loading: false,
+
         async init() {
           await this.fetch_pictures();
-          this.$watch("page", () => this.fetch_pictures());
+          this.$watch("page", () => {
+            update_query_string("page", this.page === 1 ? null : this.page);
+            this.fetch_pictures()
+          });
         },
 
         async fetch_pictures() {
-          update_query_string("page", this.page === 1 ? null : this.page);
+          this.loading=true;
           const url = "{{ url("api:pictures") }}"
           +"?album_id={{ album.id }}"
           +`&page=${this.page}`
           +"&page_size={{ settings.SITH_SAS_IMAGES_PER_PAGE }}";
           this.pictures = await (await fetch(url)).json();
+          this.loading=false;
         },
 
         nb_pages() {
@@ -141,6 +154,7 @@
         }
       }))
     })
+
     $("form#upload_form").submit(function (event) {
       let formData = new FormData($(this)[0]);