nicer loader indicator

assets/css/app.scss

@@ -1081,3 +1081,29 @@ span.mdi-loading{
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
+
+
+ //  _                 _ _
+ // | |   ___  __ _ __| (_)_ _  __ _
+ // | |__/ _ \/ _` / _` | | ' \/ _` |
+ // |____\___/\__,_\__,_|_|_||_\__, |
+ //                            |___/
+
+span.loading{
+  @include fontsans;
+  font-size: 0.756em;
+  color: $grisfonce;
+  animation: pulseloading 4s infinite;
+}
+
+@keyframes pulseloading{
+  0% {
+    opacity: 1;
+  }
+  50%{
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

assets/css/base/_layout.scss

@@ -24,6 +24,7 @@ body{
     box-sizing:border-box;
   }
   header[role="banner"]{
+    z-index:10;
     flex: 0 0 auto;
     @extend %layout-element;
     padding:1em $side-padding 1em $side-padding;

src/components/nav/HeaderMenu.vue

@@ -1,7 +1,8 @@
 <template>
   <nav id="header-menu">
-    <ul v-if="corpusLoaded">
+    <!-- <span v-if="!corpusLoaded" class="loading">Loading ...</span> -->
-      <li><router-link to="/corpus">Corpus</router-link></li>
+    <ul>
+      <li v-if="corpusLoaded"><router-link to="/corpus">Corpus</router-link></li>
       <li :class="{ opened: indexOpened }">
         <span
           @click.prevent="onClickIndex"

src/pages/Bibliographie.vue

@@ -1,7 +1,7 @@
 <template>
   <MainContentLayout id="biblio">
     <template v-if="!content" #header>
-      <span>Loading ...</span>
+      <span class="loading">Loading ...</span>
     </template>
     <template #header>
       <h1>

src/pages/Edition.vue

@@ -6,7 +6,7 @@
     @onCenterScrolled="onCenterScrolled"
   >
     <template v-if="!content" #header>
-      <span>Loading ...</span>
+      <span class="loading">Loading ...</span>
     </template>
     <template #header>
       <h1>

src/pages/IndexLocorum.vue

@@ -2,7 +2,7 @@
   <MainContentLayout id="index-locorum" class="index">
     <template v-slot:header>
       <h1>Lieux</h1>
-      <span v-if="!items.length">Loading ...</span>
+      <span v-if="!items.length" class="loading">Loading ...</span>
     </template>
 
     <ul v-if="items.length" class="item-list">

src/pages/IndexNominum.vue

@@ -2,7 +2,7 @@
   <MainContentLayout id="index-nominum" class="index">
     <template v-slot:header>
       <h1>Personnes</h1>
-      <span v-if="!items.length">Loading ...</span>
+      <span v-if="!items.length" class="loading">Loading ...</span>
     </template>
 
     <ul v-if="items.length" class="item-list">

src/pages/IndexOperum.vue

@@ -2,7 +2,7 @@
   <MainContentLayout id="index-operum" class="index">
     <template v-slot:header>
       <h1>Œuvres</h1>
-      <span v-if="!items.length">Loading ...</span>
+      <span v-if="!items.length" class="loading">Loading ...</span>
     </template>
 
     <ul v-if="items.length" class="item-list">

src/pages/ListCorpus.vue

@@ -2,7 +2,7 @@
   <MainContentLayout id="list-corpus">
     <template v-slot:header>
       <h1>Corpus</h1>
-      <span v-if="!editionslist.length">Loading ...</span>
+      <span v-if="!editionslist.length" class="loading">Loading ...</span>
     </template>
 
     <ul v-if="editionslist.length" class="item-list">