Perf test tools

src/components/conversation/conversation.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    v-if="!virtualHidden"
     :style="hiddenStyle"
     class="timeline panel-default"
     :class="[isExpanded ? 'panel' : 'panel-disabled']"
@@ -29,12 +30,15 @@
       :replies="getReplies(status.id)"
       :in-profile="inProfile"
       :profile-user-id="profileUserId"
-      :virtual-hidden="virtualHidden"
       class="status-fadein panel-body"
       @goto="setHighlight"
       @toggleExpanded="toggleExpanded"
     />
   </div>
+  <div
+    v-else
+    :style="hiddenStyle"
+  />
 </template>
 
 <script src="./conversation.js"></script>

src/components/status/status.vue

@@ -143,6 +143,7 @@
                     :title="status.visibility | capitalize"
                   />
                 </div>
+                <!--
                 <a
                   v-if="!status.is_local && !isPreview"
                   :href="status.external_url"
@@ -166,9 +167,12 @@
                   href="#"
                   @click.prevent="toggleMute"
                 ><i class="button-icon icon-eye-off" /></a>
+              -->
               </span>
             </div>
 
+            <!-- Reply Row -->
+
             <div class="heading-reply-row">
               <div
                 v-if="isReply"
@@ -188,12 +192,14 @@
                     <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
                   </a>
                 </StatusPopover>
+
                 <span
                   v-else
                   class="reply-to"
                 >
                   <span class="reply-to-text">{{ $t('status.reply_to') }}</span>
                 </span>
+
                 <router-link :to="replyProfileLink">
                   {{ replyToName }}
                 </router-link>
@@ -222,8 +228,12 @@
                 </StatusPopover>
               </div>
             </div>
+
+            <!-- -->
           </div>
 
+          <!-- Status Content -->
+
           <div
             v-if="longSubject"
             class="status-content-wrapper"
@@ -300,6 +310,8 @@
             >{{ $t("general.show_less") }}</a>
           </div>
 
+          <!-- -->
+
           <div v-if="status.poll && status.poll.options">
             <poll :base-poll="status.poll" />
           </div>
@@ -337,6 +349,8 @@
             />
           </div>
 
+          <!-- Favs and Rts
+
           <transition name="fade">
             <div
               v-if="!hidePostStats && isFocused && combinedFavsAndRepeatsUsers.length > 0"
@@ -368,11 +382,19 @@
             </div>
           </transition>
 
+          -->
+
+          <!-- Emoji Reactions -->
+
           <EmojiReactions
             v-if="(mergedConfig.emojiReactionsOnTimeline || isFocused) && (!noHeading && !isPreview)"
             :status="status"
           />
 
+          <!-- -->
+
+          <!-- Status Actions -->
+
           <div
             v-if="!noHeading && !isPreview"
             class="status-actions media-body"
@@ -411,6 +433,8 @@
               @onSuccess="clearError"
             />
           </div>
+
+          <!-- -->
         </div>
       </div>
       <div
@@ -761,7 +785,7 @@ $status-margin: 0.75em;
 }
 
 .status-fadein {
-  animation-duration: 0.4s;
+  animation-duration: 0.2s;
   animation-name: fadein;
 }
 

src/components/timeline/timeline.js

@@ -16,6 +16,8 @@ export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
   return ids
 }
 
+let timer
+
 const Timeline = {
   props: [
     'timeline',
@@ -72,7 +74,7 @@ const Timeline = {
     },
     statusesToDisplay () {
       const amount = this.timeline.visibleStatuses.length
-      const statusesPerSide = Math.ceil(Math.max(15, window.innerHeight / 80))
+      const statusesPerSide = Math.ceil(Math.max(3, window.innerHeight / 80))
       const min = Math.max(0, this.virtualScrollIndex - statusesPerSide)
       const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide)
       return this.timeline.visibleStatuses.slice(min, max).map(_ => _.id)
@@ -116,6 +118,13 @@ const Timeline = {
     if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
   },
+  beforeUpdate () {
+    timer = performance.now()
+  },
+  updated () {
+    let now = performance.now()
+    console.log('Timeline update took: ', now - timer)
+  },
   methods: {
     handleShortKey (e) {
       // Ignore when input fields are focused
@@ -155,6 +164,7 @@ const Timeline = {
     }, 1000, this),
     determineVisibleStatuses () {
       if (!this.$refs.timeline) return
+      if (!this.virtualScrollingEnabled) return
 
       const statuses = this.$refs.timeline.children
 

src/services/api/api.service.js

@@ -487,6 +487,16 @@ const deleteUser = ({ credentials, ...user }) => {
     headers: headers
   })
 }
+/* eslint-disable no-useless-escape */
+const statusStr = `{"account":{"acct":"lain","avatar":"https://lain.com/media/a95b8525b8d90c2d5ec81f46e1ca2b81da199ada0011922a262cf34fedf9125b.png","avatar_static":"https://lain.com/media/a95b8525b8d90c2d5ec81f46e1ca2b81da199ada0011922a262cf34fedf9125b.png","bot":false,"created_at":"2020-01-10T15:28:46.000Z","display_name":"lain","emojis":[],"fields":[],"followers_count":479,"following_count":80,"header":"https://lain.com/images/banner.png","header_static":"https://lain.com/images/banner.png","id":"9qrWmR0cKniB0YU0TA","locked":false,"note":"No more hiding","pleroma":{"background_image":null,"confirmation_pending":true,"hide_favorites":true,"hide_followers":false,"hide_followers_count":false,"hide_follows":false,"hide_follows_count":false,"is_admin":false,"is_moderator":false,"relationship":{},"skip_thread_containment":false,"tags":[]},"source":{"fields":[],"note":"No more hiding","pleroma":{"actor_type":"Person","discoverable":false},"sensitive":false},"statuses_count":7239,"url":"https://lain.com/users/lain","username":"lain"},"application":{"name":"Web","website":null},"bookmarked":false,"card":null,"content":"<span class=\\\"h-card\\\"><a data-user=\\\"9qrZenwP6NX6bmyTXE\\\" class=\\\"u-url mention\\\" href=\\\"https://pl.kotobank.ch/users/vaartis\\\" rel=\\\"ugc\\\">@<span>vaartis</span></a></span> to crush your enemies, see them driven before you, and to hear the lamentation of their women","created_at":"2020-02-26T14:14:50.000Z","emojis":[],"favourited":false,"favourites_count":4,"id":"9sQqKYcbpOcHH3J5kG","in_reply_to_account_id":"9qrZenwP6NX6bmyTXE","in_reply_to_id":"9sQqIMIifJtiTyxHrU","language":null,"media_attachments":[],"mentions":[{"acct":"vaartis@pl.kotobank.ch","id":"9qrZenwP6NX6bmyTXE","url":"https://pl.kotobank.ch/users/vaartis","username":"vaartis"}],"muted":false,"pinned":false,"pleroma":{"content":{"text/plain":"@vaartis to crush your enemies, see them driven before you, and to hear the lamentation of their women"},"conversation_id":343453,"direct_conversation_id":null,"emoji_reactions":[],"expires_at":null,"in_reply_to_account_acct":"vaartis@pl.kotobank.ch","local":true,"spoiler_text":{"text/plain":""},"thread_muted":false},"poll":null,"reblog":null,"reblogged":false,"reblogs_count":0,"replies_count":1,"sensitive":false,"spoiler_text":"","tags":[],"uri":"https://lain.com/objects/1052dcd5-498e-42e5-954b-35a7a5959102","url":"https://lain.com/notice/9sQqKYcbpOcHH3J5kG","visibility":"public"}`
+/* eslint-enable no-useless-escape */
+
+const makeStatus = id => {
+  let obj = JSON.parse(statusStr)
+  obj.id = id
+  obj.content += ` ${id}`
+  return obj
+}
 
 const fetchTimeline = ({
   timeline,
@@ -509,7 +519,7 @@ const fetchTimeline = ({
     favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
     tag: MASTODON_TAG_TIMELINE_URL
   }
-  const isNotifications = timeline === 'notifications'
+  // const isNotifications = timeline === 'notifications'
   const params = []
 
   let url = timelineUrls[timeline]
@@ -545,8 +555,34 @@ const fetchTimeline = ({
 
   const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
   url += `?${queryString}`
+
+  /*
   let status = ''
   let statusText = ''
+  */
+  let data = []
+
+  let id = 50000000 + (timeline === 'publicAndExternal' ? 500000 : 0)
+  let max = 20
+  if (since) {
+    id = parseInt(since)
+    max = 20
+  } else if (until) {
+    id = parseInt(until)
+  }
+  for (let i = 1; i <= max; i++) {
+    let newId
+    if (since) {
+      newId = id + i
+    } else {
+      newId = id - i
+    }
+    data.push(parseStatus(makeStatus(newId.toString())))
+  }
+  url.toString()
+  return new Promise((resolve, reject) => { setTimeout(() => resolve(data), 1000) })
+
+  /*
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => {
       status = data.status
@@ -555,6 +591,7 @@ const fetchTimeline = ({
     })
     .then((data) => data.json())
     .then((data) => {
+      console.log('data', data)
       if (!data.error) {
         return data.map(isNotifications ? parseNotification : parseStatus)
       } else {
@@ -563,6 +600,7 @@ const fetchTimeline = ({
         return data
       }
     })
+  */
 }
 
 const fetchPinnedStatuses = ({ id, credentials }) => {