improved feedback when loading ajax content

pedagogy/templates/pedagogy/guide.jinja

@@ -96,7 +96,7 @@
           {% endif %}
         </tr>
       </thead>
-      <tbody id="dynamic_view_content">
+      <tbody id="dynamic_view_content" :aria-busy="loading">
         <template x-for="uv in uvs.results" :key="uv.id">
           <tr @click="window.location.href = `/pedagogy/uv/${uv.id}`" class="clickable">
             <td><a :href="`/pedagogy/uv/${uv.id}`" x-text="uv.code"></a></td>
@@ -140,6 +140,7 @@
     document.addEventListener("alpine:init", () => {
       Alpine.data("uv_search", () => ({
         uvs: [],
+        loading: false,
         page: parseInt(initialUrlParams.get("page")) || page_default,
         page_size: parseInt(initialUrlParams.get("page_size")) || page_size_default,
         search: initialUrlParams.get("search") || "",
@@ -171,8 +172,10 @@
         },
 
         async fetch_data() {
+          this.loading = true;
           const url = "{{ url("api:fetch_uvs") }}" + window.location.search;
           this.uvs = await (await fetch(url)).json();
+          this.loading = false;
         },
 
         max_page() {