slightly improve style

core/static/core/style.scss

@@ -19,6 +19,13 @@ body {
   --loading-stroke: 5px;
   --loading-duration: 1s;
   position: relative;
+
+  &.aria-busy-grow {
+    // Make sure the element take enough place to hold the loading wheel
+    min-height: calc((var(--loading-size)) * 1.5);
+    min-width: calc((var(--loading-size)) * 1.5);
+    overflow: hidden;
+  }
 }
 
 [aria-busy]:after {
@@ -255,6 +262,13 @@ body {
     }
   }
 
+  /**
+  * A spacer below an element. Somewhat cleaner than putting <br/> everywhere.
+  */
+  .margin-bottom {
+    margin-bottom: 1.5rem;
+  }
+
   /*--------------------------------CONTENT------------------------------*/
   #quick_notif {
     width: 100%;

core/templates/core/macros.jinja

@@ -140,7 +140,7 @@
         nb_page (str): call to a javascript function or variable returning
             the maximum number of pages to paginate
     #}
-  <nav class="pagination" x-show="{{ nb_pages }} > 1">
+  <nav class="pagination" x-show="{{ nb_pages }} > 1" x-cloak>
       {# Adding the prevent here is important, because otherwise,
       clicking on the pagination buttons could submit the picture management form
       and reload the page #}

counter/templates/counter/product_list.jinja

@@ -11,8 +11,8 @@
 
 {% block content %}
   <main x-data="productList">
-    <form id="search-form">
-      <h4>{% trans %}Filter products{% endtrans %}</h4>
+    <form id="search-form" class="margin-bottom">
+      <h4 class="margin-bottom">{% trans %}Filter products{% endtrans %}</h4>
       <fieldset>
         <label for="search-input">{% trans %}Product name{% endtrans %}</label>
         <input
@@ -37,9 +37,11 @@
         </div>
       </fieldset>
     </form>
-    <h3 @click="console.log(totalCount, nbPages())">{% trans %}Product list{% endtrans %}</h3>
+    <h3 @click="console.log(totalCount, nbPages())" class="margin-bottom">
+      {% trans %}Product list{% endtrans %}
+    </h3>
 
-    <div class="row">
+    <div class="row margin-bottom">
       <a href="{{ url('counter:new_product') }}" class="btn btn-blue">
         {% trans %}New product{% endtrans %} <i class="fa fa-plus"></i>
       </a>
@@ -52,10 +54,8 @@
         {% trans %}Download as cvs{% endtrans %} <i class="fa fa-file-arrow-down"></i>
       </button>
     </div>
-    <template x-if="loading">
-      <section :aria-busy="loading"></section>
-    </template>
 
+    <div class="aria-busy-grow" :aria-busy="loading">
       <template x-for="[category, cat_products] of Object.entries(products)" :key="category">
         <section>
           <h4 x-text="category"></h4>
@@ -67,5 +67,6 @@
         </section>
       </template>
       {{ paginate_alpine("page", "nbPages") }}
+    </div>
   </main>
 {% endblock %}