From 62cbac68c8d63dae2152de6a22fc0c5ed334624e Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Fri, 31 Dec 2021 04:09:10 +0100
Subject: [PATCH] =?UTF-8?q?am=C3=A9liorations=20du=20chargeur?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components/navigation/Loader.vue | 38 +++++++++++++++++++++++++-------
layouts/default.vue | 1 +
pages/index.vue | 21 ++++++++++--------
pages/membres/_hash.vue | 2 +-
pages/membres/index.vue | 2 +-
pages/previsions/_hash.vue | 2 +-
pages/previsions/index.vue | 2 +-
pages/previsions/newcomers.vue | 2 +-
8 files changed, 48 insertions(+), 22 deletions(-)
diff --git a/components/navigation/Loader.vue b/components/navigation/Loader.vue
index 252defd..82d80f7 100644
--- a/components/navigation/Loader.vue
+++ b/components/navigation/Loader.vue
@@ -1,19 +1,41 @@
<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
diff --git a/layouts/default.vue b/layouts/default.vue
index cbc088c..95b9bdb 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -61,5 +61,6 @@ export default {
}
main {
padding-top: 5rem;
+ position: relative;
}
</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index f1a3177..a328af1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,17 +1,20 @@
<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>
diff --git a/pages/membres/_hash.vue b/pages/membres/_hash.vue
index e40420d..c0bfe3f 100644
--- a/pages/membres/_hash.vue
+++ b/pages/membres/_hash.vue
@@ -1,6 +1,6 @@
<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">
diff --git a/pages/membres/index.vue b/pages/membres/index.vue
index 937b2e2..4632a21 100644
--- a/pages/membres/index.vue
+++ b/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"/>
diff --git a/pages/previsions/_hash.vue b/pages/previsions/_hash.vue
index 717ec9d..7c0c250 100644
--- a/pages/previsions/_hash.vue
+++ b/pages/previsions/_hash.vue
@@ -1,6 +1,6 @@
<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">
diff --git a/pages/previsions/index.vue b/pages/previsions/index.vue
index ca47a0e..a7e776d 100644
--- a/pages/previsions/index.vue
+++ b/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>
diff --git a/pages/previsions/newcomers.vue b/pages/previsions/newcomers.vue
index 68c30a0..49e3271 100644
--- a/pages/previsions/newcomers.vue
+++ b/pages/previsions/newcomers.vue
@@ -1,6 +1,6 @@
<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">
--
GitLab