add custom solution for virtual scrolling to ease ram and cpu use when scrolling for a long time

src/components/conversation/conversation.js

@@ -35,7 +35,8 @@ const conversation = {
   data () {
     return {
       highlight: null,
-      expanded: false
+      expanded: false,
+      height: '115px'
     }
   },
   props: [
@@ -44,7 +45,8 @@ const conversation = {
     'isPage',
     'pinnedStatusIdsObject',
     'inProfile',
-    'profileUserId'
+    'profileUserId',
+    'hidden'
   ],
   created () {
     if (this.isPage) {
@@ -102,6 +104,9 @@ const conversation = {
     },
     isExpanded () {
       return this.expanded || this.isPage
+    },
+    hiderStyle () {
+      return this.hidden ? { height: this.height } : {}
     }
   },
   components: {
@@ -112,7 +117,7 @@ const conversation = {
       const newConversationId = this.getConversationId(newVal)
       const oldConversationId = this.getConversationId(oldVal)
       if (newConversationId && oldConversationId && newConversationId === oldConversationId) {
-        this.setHighlight(this.originalStatusId)
+        this.setHighheightlight(this.originalStatusId)
       } else {
         this.fetchConversation()
       }
@@ -121,6 +126,10 @@ const conversation = {
       if (value) {
         this.fetchConversation()
       }
+    },
+    hidden (value) {
+      this.height = `${this.$el.clientHeight}px`
+      console.log('Element height:', this.height)
     }
   },
   methods: {

src/components/conversation/conversation.vue

@@ -1,10 +1,11 @@
 <template>
   <div
+    :style="hiderStyle"
     class="timeline panel-default"
     :class="[isExpanded ? 'panel' : 'panel-disabled']"
   >
     <div
-      v-if="isExpanded"
+      v-if="isExpanded && !hidden"
       class="panel-heading conversation-heading"
     >
       <span class="title"> {{ $t('timeline.conversation') }} </span>
@@ -28,6 +29,7 @@
       :replies="getReplies(status.id)"
       :in-profile="inProfile"
       :profile-user-id="profileUserId"
+      :hidden="hidden"
       class="status-fadein panel-body"
       @goto="setHighlight"
       @toggleExpanded="toggleExpanded"