Improve the message when loading comments below event

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

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"

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();
   });
 

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>