Improve the message when loading comments below event

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-12-04 15:07:27 +01:00
parent 10826650e7
commit d9cc9f5842
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
3 changed files with 11 additions and 12 deletions

View file

@ -39,10 +39,13 @@
<b-notification v-else :closable="false">{{ <b-notification v-else :closable="false">{{
$t("The organiser has chosen to close comments.") $t("The organiser has chosen to close comments.")
}}</b-notification> }}</b-notification>
<transition name="comment-empty-list" mode="out-in"> <p
<p v-if="$apollo.queries.comments.loading" class="loading"> v-if="$apollo.queries.comments.loading"
{{ $t("Loading…") }} class="loading has-text-centered"
>
{{ $t("Loading comments…") }}
</p> </p>
<transition name="comment-empty-list" mode="out-in" v-else>
<transition-group <transition-group
name="comment-list" name="comment-list"
v-if="comments.length" v-if="comments.length"

View file

@ -91,7 +91,7 @@ describe("CommentTree", () => {
expect(wrapper.findComponent({ name: "b-notification" }).text()).toBe( expect(wrapper.findComponent({ name: "b-notification" }).text()).toBe(
"The organiser has chosen to close comments." "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(); expect(wrapper.html()).toMatchSnapshot();
}); });

View file

@ -3,12 +3,9 @@
exports[`CommentTree renders a comment tree 1`] = ` exports[`CommentTree renders a comment tree 1`] = `
<div> <div>
<b-notification-stub active="true" duration="2000" animation="fade">The organiser has chosen to close comments.</b-notification-stub> <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 has-text-centered">
<p class="loading"> Loading comments…
Loading…
</p> </p>
<!---->
</transition-stub>
</div> </div>
`; `;
@ -16,7 +13,6 @@ exports[`CommentTree renders a comment tree 2`] = `
<div> <div>
<b-notification-stub active="true" duration="2000" animation="fade">The organiser has chosen to close comments.</b-notification-stub> <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-stub name="comment-empty-list" mode="out-in">
<!---->
<transition-group-stub tag="ul" name="comment-list" class="comment-list"> <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>
<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>