Improve build times

* Fix bulma/buefy being imported many (many !!!) times

* Remove javascript-time-ago because date-fns pretty much does the same
thing

* Make sure languages are loaded asynchronously

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

js/src/components/Discussion/DiscussionComment.vue

@@ -43,7 +43,10 @@
         </span>
         <div class="post-infos">
           <span :title="comment.insertedAt | formatDateTimeString">
-            {{ $timeAgo.format(new Date(comment.updatedAt), "twitter") || $t("Right now") }}</span
+            {{
+              formatDistanceToNow(new Date(comment.updatedAt), { locale: $dateFnsLocale }) ||
+              $t("Right now")
+            }}</span
           >
         </div>
       </div>
@@ -53,7 +56,13 @@
           v-if="comment.insertedAt.getTime() !== comment.updatedAt.getTime()"
           :title="comment.updatedAt | formatDateTimeString"
         >
-          {{ $t("Edited {ago}", { ago: $timeAgo.format(new Date(comment.updatedAt)) }) }}
+          {{
+            $t("Edited {ago}", {
+              ago: formatDistanceToNow(new Date(comment.updatedAt), {
+                locale: $dateFnsLocale,
+              }),
+            })
+          }}
         </p>
       </div>
       <div class="comment-deleted" v-else-if="!editMode">
@@ -76,7 +85,8 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { IComment, CommentModel } from "../../types/comment.model";
+import { formatDistanceToNow } from "date-fns";
+import { IComment } from "../../types/comment.model";
 import { usernameWithDomain, IPerson } from "../../types/actor";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 
@@ -99,14 +109,16 @@ export default class DiscussionComment extends Vue {
 
   usernameWithDomain = usernameWithDomain;
 
+  formatDistanceToNow = formatDistanceToNow;
+
   // isReportModalActive: boolean = false;
 
-  toggleEditMode() {
+  toggleEditMode(): void {
     this.updatedComment = this.comment.text;
     this.editMode = !this.editMode;
   }
 
-  updateComment() {
+  updateComment(): void {
     this.comment.text = this.updatedComment;
     this.$emit("update-comment", this.comment);
     this.toggleEditMode();
@@ -114,8 +126,6 @@ export default class DiscussionComment extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-@import "@/variables.scss";
-
 article.comment {
   display: flex;
   border-top: 1px solid #e9e9e9;

js/src/components/Discussion/DiscussionListItem.vue

@@ -16,7 +16,10 @@
       <div class="title-and-date">
         <p class="discussion-minimalist-title">{{ discussion.title }}</p>
         <span :title="actualDate | formatDateTimeString">
-          {{ $timeAgo.format(new Date(actualDate), "twitter") || $t("Right now") }}</span
+          {{
+            formatDistanceToNowStrict(new Date(actualDate), { locale: $dateFnsLocale }) ||
+            $t("Right now")
+          }}</span
         >
       </div>
       <div class="has-text-grey" v-if="!discussion.lastComment.deletedAt">
@@ -28,6 +31,7 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
+import { formatDistanceToNowStrict } from "date-fns";
 import { IDiscussion } from "../../types/discussions";
 import RouteName from "../../router/name";
 
@@ -37,7 +41,9 @@ export default class DiscussionListItem extends Vue {
 
   RouteName = RouteName;
 
-  get htmlTextEllipsis() {
+  formatDistanceToNowStrict = formatDistanceToNowStrict;
+
+  get htmlTextEllipsis(): string {
     const element = document.createElement("div");
     if (this.discussion.lastComment && this.discussion.lastComment.text) {
       element.innerHTML = this.discussion.lastComment.text
@@ -47,7 +53,7 @@ export default class DiscussionListItem extends Vue {
     return element.innerText;
   }
 
-  get actualDate() {
+  get actualDate(): string | Date | undefined {
     if (this.discussion.updatedAt === this.discussion.insertedAt && this.discussion.lastComment) {
       return this.discussion.lastComment.publishedAt;
     }