améliorations du chargeur

components/navigation/Loader.vue

 <template>
-  <div class="loader mx-auto" role="status" v-if="isLoading">
-    <span class="sr-only">Chargement...</span>
-  </div>
+<div class="loader overflow-hidden text-center position-absolute" :class="state">
+  <img src="~@/assets/img/loader.gif">
+  <div class="text-center font-weight-bold my-3">Chargement...</div>
+</div>
+
 </template>
 
 <script>
 export default {
-    props: {isLoading: Boolean}
+    data() {
+      return {
+        state: ''
+      }
+    },
+    props: {isLoading: Boolean},
+    watch: {
+      isLoading: {
+        handler(n,o) {
+          this.state = "hidden"
+        }
+      }
+    }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .loader {
-  background-image: url('~@/assets/img/loader.gif');
-  height: 300px;
-  width: 400px;
+  z-index: 50;
+  left: 50%;
+  transform: translateX(-50%);
+  --color: #391855;
+  color: var(--color);
+}
+.result, .loader {
+  transition: opacity .3s linear;
+}
+.hidden {
+  opacity: 0;
 }
 </style>
\ No newline at end of file

layouts/default.vue

@@ -61,5 +61,6 @@ export default {
 }
 main {
   padding-top: 5rem;
+  position: relative;
 }
 </style>
\ No newline at end of file

pages/index.vue

 <template>
 <main class="container">
   <h2 class="text-center mb-5 font-weight-light">Entrées et sorties de la toile de confiance des 2 derniers jours</h2>
-  <NavigationLoader :isLoading="$apollo.queries.newMembers.loading" class="d-block mx-auto" />
-  <div class="row text-center" v-if="!$apollo.queries.newMembers.loading && newMembers">
-    <div class="col-lg-6">
-      <h2 class="h4 text-success">Bienvenue à</h2>
-      <MemberList :members="newMembers['entrees']" :displayPubkey="false" :displayHead="false" />
-    </div>
-    <div class="col-lg-6">
-      <h2 class="h4 text-danger">Au revoir à</h2>
-      <MemberList :members="newMembers['sorties']" :displayPubkey="false" :displayHead="false" />
+  <NavigationLoader :isLoading="$apollo.queries.newMembers.loading" />
+  <div class="result" :class={hidden:$apollo.queries.newMembers.loading}>
+    <div class="row text-center" v-if="!$apollo.queries.newMembers.loading && newMembers">
+      <div class="col-lg-6">
+        <h2 class="h4 text-success">Bienvenue à</h2>
+        <MemberList :members="newMembers['entrees']" :displayPubkey="false" :displayHead="false" />
+      </div>
+      <div class="col-lg-6">
+        <h2 class="h4 text-danger">Au revoir à</h2>
+        <MemberList :members="newMembers['sorties']" :displayPubkey="false" :displayHead="false" />
+      </div>
     </div>
   </div>
+
 </main>
 </template>
 

pages/membres/_hash.vue

 <template>
   <main class="content container">
-    <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" class="d-block mb-3" />
+    <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
     <div v-if="!$apollo.queries.idFromHash.loading">
       <div class="row">
         <div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3">

pages/membres/index.vue

@@ -8,7 +8,7 @@
       <small id="rechHelp" class="form-text text-muted">Saisissez le début d'un pseudo ou d'une clé publique</small>
     </div>
   </div>
-  <NavigationLoader :isLoading="$apollo.queries.idSearch.loading" class="d-block mx-auto" />
+  <NavigationLoader :isLoading="$apollo.queries.idSearch.loading" />
   <div class="row" v-if="idSearch && !$apollo.queries.idSearch.loading && param.length > 2">
     <div class="col-8 m-auto">
       <MemberList :members="idSearch.ids"/>

pages/previsions/_hash.vue

 <template>
   <main class="content container">
-    <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" class="d-block mb-3" />
+    <NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
     <div v-if="!$apollo.queries.idFromHash.loading">
       <div class="row">
         <div class="col-md-10 col-lg-8 col-xl-6 mx-auto mt-3">

pages/previsions/index.vue

@@ -2,7 +2,7 @@
 <main class="container">
   <h2 class="text-center mb-5 font-weight-light">En préparation</h2>
   <b-alert variant="danger" show>En développement</b-alert>
-  <NavigationLoader :isLoading="$apollo.queries.test.loading" class="d-block mb-3" />
+  <NavigationLoader :isLoading="$apollo.queries.test.loading" />
   <div v-if="test">
     {{ test }}
   </div>

pages/previsions/newcomers.vue

 <template>
 <main class="container">
-  <NavigationLoader :isLoading="$apollo.queries.wwResult.loading" class="d-block mx-auto" />
+  <NavigationLoader :isLoading="$apollo.queries.wwResult.loading" />
   <div v-if="!$apollo.queries.wwResult.loading">
     <h2 class="text-center mb-5 font-weight-light">Prévisions <small><span class="badge badge-secondary">{{ wwResult.dossiers_nb }} dossiers en attente</span></small></h2>
     <div class="alert alert-info" role="alert">