From 1c657b86b85775da87daa5eb063120397ed20d42 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 11 Jun 2021 11:05:28 +0300
Subject: [PATCH] fix infinite loop

---
 src/components/rich_content/rich_content.jsx | 15 ++++++------
 src/components/status_body/status_body.vue   | 25 +++++++-------------
 2 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 8972c494..f7fa4dce 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -42,7 +42,7 @@ export default Vue.component('RichContent', {
   // NEVER EVER TOUCH DATA INSIDE RENDER
   render (h) {
     // Pre-process HTML
-    const { newHtml: html, lastMentions } = preProcessPerLine(this.html, this.greentext, this.hideLastMentions)
+    const { newHtml: html, lastMentions } = preProcessPerLine(this.html, this.greentext, this.hideMentions)
     const firstMentions = [] // Mentions that appear in the beginning of post body
     const lastTags = [] // Tags that appear at the end of post body
     const writtenMentions = [] // All mentions that appear in post body
@@ -187,6 +187,13 @@ export default Vue.component('RichContent', {
       return item
     }
 
+    // DO NOT USE SLOTS they cause a re-render feedback loop here.
+    // slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
+    // at least until vue3?
+    const result = <span class="RichContent">
+      { convertHtmlToTree(html).map(processItem).reverse().map(processItemReverse).reverse() }
+    </span>
+
     const event = {
       firstMentions,
       lastMentions,
@@ -195,12 +202,6 @@ export default Vue.component('RichContent', {
       writtenTags
     }
 
-    const result = <span class="RichContent">
-      { this.$slots.prefix }
-      { convertHtmlToTree(html).map(processItem).reverse().map(processItemReverse).reverse() }
-      { this.$slots.suffix }
-    </span>
-
     // DO NOT MOVE TO UPDATE. BAD IDEA.
     this.$emit('parseReady', event)
 
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 68f6701f..799e812d 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -38,10 +38,11 @@
         >
           {{ $t("general.show_more") }}
         </button>
-        <span
-          class="text-wrapper"
-          v-if="!hideSubjectStatus && !(singleLine && status.summary_html)"
-        >
+        <span v-if="!hideSubjectStatus && !(singleLine && status.summary_html)">
+          <MentionsLine
+            v-if="!hideMentions && firstMentions && firstMentions.length > 0"
+            :mentions="firstMentions"
+          />
           <RichContent
             :class="{ '-single-line': singleLine }"
             class="text media-body"
@@ -53,19 +54,11 @@
             @parseReady="setHeadTailLinks"
             ref="text"
           >
-            <template v-slot:prefix>
-              <MentionsLine
-                v-if="!hideMentions && firstMentions && firstMentions.length > 0"
-                :mentions="firstMentions"
-              />
-            </template>
-            <template v-slot:suffix>
-              <MentionsLine
-                v-if="!hideMentions && lastMentions.length > 0 && firstMentions.length === 0"
-                :mentions="lastMentions"
-              />
-            </template>
           </RichContent>
+          <MentionsLine
+            v-if="!hideMentions && lastMentions.length > 0 && firstMentions.length === 0"
+            :mentions="lastMentions"
+          />
         </span>
 
         <button