From d9cc9f58426a8f735f0a65fc63378ddd27fd52b8 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 4 Dec 2020 15:07:27 +0100
Subject: [PATCH] Improve the message when loading comments below event

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Comment/CommentTree.vue             | 11 +++++++----
 .../unit/specs/components/Comment/CommentTree.spec.ts |  2 +-
 .../Comment/__snapshots__/CommentTree.spec.ts.snap    | 10 +++-------
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/js/src/components/Comment/CommentTree.vue b/js/src/components/Comment/CommentTree.vue
index 592e23cd9..10c5bbc44 100644
--- a/js/src/components/Comment/CommentTree.vue
+++ b/js/src/components/Comment/CommentTree.vue
@@ -39,10 +39,13 @@
     <b-notification v-else :closable="false">{{
       $t("The organiser has chosen to close comments.")
     }}</b-notification>
-    <transition name="comment-empty-list" mode="out-in">
-      <p v-if="$apollo.queries.comments.loading" class="loading">
-        {{ $t("Loading…") }}
-      </p>
+    <p
+      v-if="$apollo.queries.comments.loading"
+      class="loading has-text-centered"
+    >
+      {{ $t("Loading comments…") }}
+    </p>
+    <transition name="comment-empty-list" mode="out-in" v-else>
       <transition-group
         name="comment-list"
         v-if="comments.length"
diff --git a/js/tests/unit/specs/components/Comment/CommentTree.spec.ts b/js/tests/unit/specs/components/Comment/CommentTree.spec.ts
index 950ea51b6..886c6a443 100644
--- a/js/tests/unit/specs/components/Comment/CommentTree.spec.ts
+++ b/js/tests/unit/specs/components/Comment/CommentTree.spec.ts
@@ -91,7 +91,7 @@ describe("CommentTree", () => {
     expect(wrapper.findComponent({ name: "b-notification" }).text()).toBe(
       "The organiser has chosen to close comments."
     );
-    expect(wrapper.find(".loading").text()).toBe("Loading…");
+    expect(wrapper.find(".loading").text()).toBe("Loading comments…");
     expect(wrapper.html()).toMatchSnapshot();
   });
 
diff --git a/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap b/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
index 4ea79739c..48a66f29d 100644
--- a/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
+++ b/js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap
@@ -3,12 +3,9 @@
 exports[`CommentTree renders a comment tree 1`] = `
 <div>
   <b-notification-stub active="true" duration="2000" animation="fade">The organiser has chosen to close comments.</b-notification-stub>
-  <transition-stub name="comment-empty-list" mode="out-in">
-    <p class="loading">
-      Loading…
-    </p>
-    <!---->
-  </transition-stub>
+  <p class="loading has-text-centered">
+    Loading comments…
+  </p>
 </div>
 `;
 
@@ -16,7 +13,6 @@ exports[`CommentTree renders a comment tree 2`] = `
 <div>
   <b-notification-stub active="true" duration="2000" animation="fade">The organiser has chosen to close comments.</b-notification-stub>
   <transition-stub name="comment-empty-list" mode="out-in">
-    <!---->
     <transition-group-stub tag="ul" name="comment-list" class="comment-list">
       <comment-stub comment="[object Object]" event="[object Object]" class="root-comment"></comment-stub>
       <comment-stub comment="[object Object]" event="[object Object]" class="root-comment"></comment-stub>