fix: 初回ロード時の遅延をなくす

Author: uni-kakurenbo

src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue

@@ -7,6 +7,7 @@
       :is-reached-end="isReachedEnd"
       :is-reached-latest="isReachedLatest"
       :is-loading="isLoading"
+      :is-initial-load="isInitialLoad"
       :entry-message-id="entryMessageId"
       :last-loading-direction="lastLoadingDirection"
       @request-load-former="onLoadFormerMessagesRequest"
@@ -29,6 +30,7 @@
           :class="$style.element"
           :message-id="messageId"
           :is-archived="isArchived"
+          :is-initial-load="isInitialLoad"
           :is-entry-message="messageId === entryMessageId"
           :pinned-user-id="messagePinnedUserMap.get(messageId)"
           @change-height="onChangeHeight"
@@ -85,6 +87,7 @@ const {
   isReachedEnd,
   isReachedLatest,
   isLoading,
+  isInitialLoad,
   lastLoadingDirection,
   unreadSince,
   onLoadFormerMessagesRequest,

src/components/Main/MainView/MessageElement/MessageContents.vue

@@ -8,15 +8,19 @@
       :updated-at="message.updatedAt"
     />
     <div :class="$style.messageContents">
-      <MarkdownContent v-show="!isEditing" :content="renderedContent" />
+      <MarkdownContent
+        v-show="!isEditing"
+        :content="renderedContent"
+        :defer-on-mounted="!isInitialLoad"
+      />
       <MessageEditor
         v-if="isEditing"
         :raw-content="message.content"
         :message-id="messageId"
         :channel-id="message.channelId"
         @finish-editing="finishEditing"
       />
-      <DeferredRender>
+      <DeferredRender :disabled="isInitialLoad">
         <MessageQuoteList
           v-if="embeddingsState.quoteMessageIds.length > 0"
           :class="$style.messageEmbeddingsList"
@@ -58,6 +62,7 @@ import MessageHeader from './MessageHeader.vue'
 
 const props = defineProps<{
   messageId: MessageId
+  isInitialLoad?: boolean
 }>()
 
 const { messagesMap } = useMessagesStore()

src/components/Main/MainView/MessageElement/MessageElement.vue

@@ -28,6 +28,7 @@
       <MessageContents
         :class="$style.messageContents"
         :message-id="messageId"
+        :is-initial-load="isInitialLoad"
       />
       <MessageStampList
         :show-detail-button="isHovered || isMobile"
@@ -65,10 +66,12 @@ const props = withDefaults(
     pinnedUserId?: UserId
     isEntryMessage?: boolean
     isArchived?: boolean
+    isInitialLoad?: boolean
   }>(),
   {
     isEntryMessage: false,
-    isArchived: false
+    isArchived: false,
+    isInitialLoad: false
   }
 )
 

src/components/Main/MainView/MessagesScroller/MessagesScroller.vue

@@ -1,6 +1,5 @@
 <template>
   <div :class="$style.container">
-    <MessagesSkeleton v-if="!ready" :class="$style.skeleton" />
     <div
       ref="rootRef"
       :class="[$style.root, !ready && $style.hidden]"
@@ -21,8 +20,7 @@
           v-if="!isReachedEnd"
           ref="topSkeletonRef"
           :simple="!enableProactiveLoading"
-          instant
-          :count="3"
+          :count="isInitialLoad ? 10 : 3"
           :class="$style.edgeSkeleton"
         />
         <MessagesScrollerSeparator
@@ -43,7 +41,7 @@
           reversed
           instant
           :simple="!enableProactiveLoading"
-          :count="3"
+          :count="isInitialLoad ? 10 : 3"
           :class="$style.edgeSkeleton"
         />
       </div>
@@ -201,6 +199,7 @@ const props = withDefaults(
     isReachedEnd: boolean
     isReachedLatest: boolean
     isLoading?: boolean
+    isInitialLoad?: boolean
     entryMessageId?: MessageId
     lastLoadingDirection: LoadingDirection
   }>(),
@@ -375,7 +374,6 @@ defineExpose({ rootRef })
   position: absolute;
   inset: 0;
   opacity: 1;
-  visibility: visible;
   transition: opacity 0.3s ease-in;
   margin-bottom: 24px;
 

src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue

@@ -43,6 +43,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
+
 const props = withDefaults(
   defineProps<{
     count?: number
@@ -76,7 +78,9 @@ const generateRandomMessage = () => {
   }
 }
 
-const items = Array.from({ length: props.count }, generateRandomMessage)
+const items = computed(() =>
+  Array.from({ length: props.count }, generateRandomMessage)
+)
 </script>
 
 <style lang="scss" module>

src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts

@@ -4,7 +4,7 @@ import { ref } from 'vue'
 
 import type { ChangeHeightData } from '/@/components/Main/MainView/MessageElement/composables/useElementRenderObserver'
 import type { LoadingDirection } from '/@/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher'
-import { defer, wait } from '/@/lib/basic/timer'
+import { defer } from '/@/lib/basic/timer'
 import type { MessageId } from '/@/types/entity-ids'
 
 const useMessageScroller = (
@@ -132,10 +132,7 @@ const useMessageScroller = (
 
           state.height = newHeight
 
-          defer(async () => {
-            await defer()
-            await wait(400)
-
+          defer(() => {
             ready.value = true
           })
         }

src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts

@@ -213,6 +213,7 @@ const useMessageFetcher = (
 
   const init = () => {
     resetRenderedContent()
+    isInitialLoad.value = true
     if (props.entryMessageId) {
       onLoadAroundMessagesRequest(props.entryMessageId)
     } else {

src/components/UI/DeferredRender.vue

@@ -1,11 +1,20 @@
 <template>
-  <slot v-if="ready" />
+  <slot v-if="disabled || ready" />
 </template>
 
 <script lang="ts" setup>
 import { computedAsync } from '@vueuse/core'
 
 import { defer } from '/@/lib/basic/timer'
 
+withDefaults(
+  defineProps<{
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false
+  }
+)
+
 const ready = computedAsync(() => defer(() => true))
 </script>

src/components/UI/MarkdownContent.vue

@@ -14,9 +14,15 @@ import { defer } from '/@/lib/basic/timer'
 
 import FoldableCodeBlock from './FoldableCodeBlock.vue'
 
-const props = defineProps<{
-  content: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    content: string
+    deferOnMounted?: boolean
+  }>(),
+  {
+    deferOnMounted: true
+  }
+)
 
 const contentRef = ref<HTMLElement>()
 
@@ -42,7 +48,13 @@ const applyFoldableCodeBlock = () => {
   })
 }
 
-onMounted(() => defer(applyFoldableCodeBlock))
+onMounted(() => {
+  if (props.deferOnMounted) {
+    defer(applyFoldableCodeBlock)
+    return
+  }
+  applyFoldableCodeBlock()
+})
 watch(() => props.content, applyFoldableCodeBlock, { flush: 'post' })
 </script>