From b719b06a8eda15e030ee9f669a32c1ac52f49adb Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@figureslibres.io>
Date: Tue, 28 Jul 2020 12:01:35 +0200
Subject: [PATCH] nicer loader indicator

---
 assets/css/app.scss               | 26 ++++++++++++++++++++++++++
 assets/css/base/_layout.scss      |  1 +
 src/components/nav/HeaderMenu.vue |  5 +++--
 src/pages/Bibliographie.vue       |  2 +-
 src/pages/Edition.vue             |  2 +-
 src/pages/IndexLocorum.vue        |  2 +-
 src/pages/IndexNominum.vue        |  2 +-
 src/pages/IndexOperum.vue         |  2 +-
 src/pages/ListCorpus.vue          |  2 +-
 9 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/assets/css/app.scss b/assets/css/app.scss
index ecdcad8..c5abd93 100644
--- a/assets/css/app.scss
+++ b/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;
+  }
+}
diff --git a/assets/css/base/_layout.scss b/assets/css/base/_layout.scss
index 4187bd0..8b5e4ac 100644
--- a/assets/css/base/_layout.scss
+++ b/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;
diff --git a/src/components/nav/HeaderMenu.vue b/src/components/nav/HeaderMenu.vue
index d4a6548..b1817c0 100644
--- a/src/components/nav/HeaderMenu.vue
+++ b/src/components/nav/HeaderMenu.vue
@@ -1,7 +1,8 @@
 <template>
   <nav id="header-menu">
-    <ul v-if="corpusLoaded">
-      <li><router-link to="/corpus">Corpus</router-link></li>
+    <!-- <span v-if="!corpusLoaded" class="loading">Loading ...</span> -->
+    <ul>
+      <li v-if="corpusLoaded"><router-link to="/corpus">Corpus</router-link></li>
       <li :class="{ opened: indexOpened }">
         <span
           @click.prevent="onClickIndex"
diff --git a/src/pages/Bibliographie.vue b/src/pages/Bibliographie.vue
index 4cf0013..b7633df 100644
--- a/src/pages/Bibliographie.vue
+++ b/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>
diff --git a/src/pages/Edition.vue b/src/pages/Edition.vue
index 435f6ed..31040a3 100644
--- a/src/pages/Edition.vue
+++ b/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>
diff --git a/src/pages/IndexLocorum.vue b/src/pages/IndexLocorum.vue
index a52b291..b74a428 100644
--- a/src/pages/IndexLocorum.vue
+++ b/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">
diff --git a/src/pages/IndexNominum.vue b/src/pages/IndexNominum.vue
index ec9d193..a25fb82 100644
--- a/src/pages/IndexNominum.vue
+++ b/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">
diff --git a/src/pages/IndexOperum.vue b/src/pages/IndexOperum.vue
index a6ad1ad..bb4c3ea 100644
--- a/src/pages/IndexOperum.vue
+++ b/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">
diff --git a/src/pages/ListCorpus.vue b/src/pages/ListCorpus.vue
index ca9f21d..205c449 100644
--- a/src/pages/ListCorpus.vue
+++ b/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">