feat: 先読みが無効化されるときの挙動を改善

Author: uni-kakurenbo

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

@@ -18,10 +18,11 @@
         data-testid="channel-viewport"
       >
         <MessagesSkeleton
-          v-if="enablePreload && !isReachedEnd"
+          v-if="!isReachedEnd"
           ref="topSkeletonRef"
           :key="topSkeletonKey"
-          :count="16"
+          :simple="!enableProactiveLoading"
+          :count="enableProactiveLoading ? 16 : 3"
           :class="$style.edgeSkeleton"
         />
         <MessagesScrollerSeparator
@@ -37,11 +38,12 @@
           />
         </template>
         <MessagesSkeleton
-          v-if="enablePreload && !isReachedLatest"
+          v-if="enableProactiveLoading && !isReachedLatest"
           ref="bottomSkeletonRef"
           :key="bottomSkeletonKey"
           reversed
-          :count="8"
+          :simple="!enableProactiveLoading"
+          :count="enableProactiveLoading ? 16 : 3"
           :class="$style.edgeSkeleton"
         />
       </div>
@@ -54,22 +56,15 @@
 import { emit } from 'process'
 
 import type { ComponentPublicInstance, Ref } from 'vue'
-import {
-  computed,
-  nextTick,
-  onMounted,
-  shallowRef,
-  watch,
-  watchEffect
-} from 'vue'
+import { computed, nextTick, onMounted, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import {
   useEventListener,
   useIntersectionObserver,
   useResizeObserver
 } from '@vueuse/core'
-import { throttle } from 'throttle-debounce'
+import { debounce, throttle } from 'throttle-debounce'
 
 import { useOpenLink } from '/@/composables/useOpenLink'
 import useResponsive from '/@/composables/useResponsive'
@@ -90,8 +85,8 @@ export interface MessageScrollerInstance extends ComponentPublicInstance {
   rootRef: HTMLDivElement
 }
 
-const MIN_THRESHOLD = 500 // 最小の閾値
-const THRESHOLD_INCREMENT = 1000 // 端に到達するたびに増加させる閾値
+const MIN_THRESHOLD = 1000 // 最小の閾値
+const THRESHOLD_INCREMENT = 1500 // 端に到達するたびに増加させる閾値
 const DECAY_PER_SECOND = 0.6 // 一秒あたりの減衰率
 
 /**
@@ -250,41 +245,52 @@ const bottomSkeletonKey = shallowRef(0)
 useResizeObserver(
   () => topSkeletonRef.value?.$el,
   entries => {
-    topSkeletonHeight.value = entries[0]?.contentRect.height ?? 0
+    topSkeletonHeight.value =
+      unrefElement(topSkeletonRef).getBoundingClientRect().height ?? 0
   }
 )
+
 useResizeObserver(
   () => bottomSkeletonRef.value?.$el,
   entries => {
-    bottomSkeletonHeight.value = entries[0]?.contentRect.height ?? 0
+    bottomSkeletonHeight.value =
+      unrefElement(bottomSkeletonRef).getBoundingClientRect().height ?? 0
   }
 )
 
+const { isMobile } = useResponsive()
+const enableProactiveLoading = computed(() => !isIOS() && !isMobile)
+
 // IntersectionObserverでスケルトンがビューポートから出たことを検出し、再生成する
 // 可視→非可視の遷移のみで再生成するため、前回の状態を追跡
 let wasTopVisible = false
 let wasBottomVisible = false
 
 useIntersectionObserver(
   () => unrefElement(topSkeletonRef),
-  ([entry]) => {
+  async ([entry]) => {
     if (!entry) return
+
     // 可視→非可視の遷移時のみキーを更新
     if (wasTopVisible && !entry.isIntersecting) {
       topSkeletonKey.value++
     }
+
     wasTopVisible = entry.isIntersecting
   },
   { root: rootRef }
 )
+
 useIntersectionObserver(
   () => unrefElement(bottomSkeletonRef),
   ([entry]) => {
     if (!entry) return
+
     // 可視→非可視の遷移時のみキーを更新
     if (wasBottomVisible && !entry.isIntersecting) {
       bottomSkeletonKey.value++
     }
+
     wasBottomVisible = entry.isIntersecting
   },
   { root: rootRef }
@@ -321,15 +327,12 @@ watch(
 )
 
 const { getThreshold, update: updateThreshold } = useDynamicLoadThreshold()
-const { isMobile } = useResponsive()
-
-const enablePreload = computed(() => !isIOS() && !isMobile.value)
 
 // スケルトンの端に到達した場合にスクロール位置を戻してループさせる
 const SKELETON_LOOP_MARGIN = 50 // 端からのマージン
 
 const loopSkeletonIfNeeded = async () => {
-  if (!rootRef.value || !enablePreload.value) return
+  if (!rootRef.value) return
 
   const { scrollTop, scrollHeight, clientHeight } = rootRef.value
 
@@ -345,11 +348,11 @@ const loopSkeletonIfNeeded = async () => {
 
     // 新しいスケルトンの高さとの差分を補正
     const heightDiff = topSkeletonHeight.value - oldHeight
-    rootRef.value.scrollBy({ top: loopAmount + heightDiff })
+    rootRef.value.scrollTo({ top: scrollTop + loopAmount + heightDiff })
   }
 
   // 下端のスケルトンに到達した場合
-  if (
+  else if (
     scrollHeight - (scrollTop + clientHeight) < SKELETON_LOOP_MARGIN &&
     !props.isReachedLatest
   ) {
@@ -362,24 +365,26 @@ const loopSkeletonIfNeeded = async () => {
     await nextTick()
 
     // 下端の場合は高さの差分は自動的に反映されるので、loopAmountだけ戻す
-    rootRef.value.scrollBy({ top: -loopAmount })
+    rootRef.value.scrollTo({ top: scrollTop - loopAmount })
   }
 }
 
 const requestLoadMessages = () => {
   if (!rootRef.value) return
   state.scrollTop = rootRef.value.scrollTop
 
-  loopSkeletonIfNeeded()
-
   const top = rootRef.value.scrollTop - topSkeletonHeight.value
   const bottom =
     rootRef.value.scrollHeight -
     (rootRef.value.scrollTop +
       rootRef.value.clientHeight +
       bottomSkeletonHeight.value)
 
-  if (enablePreload.value) updateThreshold(top, bottom)
+  if (enableProactiveLoading.value) {
+    loopSkeletonIfNeeded()
+    updateThreshold(top, bottom)
+  }
+
   const threshold = getThreshold()
 
   if (props.isLoading) return
@@ -391,7 +396,10 @@ const requestLoadMessages = () => {
   }
 }
 
-const handleScroll = throttle(64, requestLoadMessages)
+const handleScroll = (enableProactiveLoading.value ? throttle : debounce)(
+  200,
+  requestLoadMessages
+)
 
 const visibilitychangeListener = () => {
   if (document.visibilityState === 'visible') {

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

@@ -44,27 +44,31 @@
 const props = withDefaults(
   defineProps<{
     count?: number
+    simple?: boolean
     reversed?: boolean
   }>(),
   {
     count: 16,
+    simple: false,
     reversed: false
   }
 )
 
 const generateRandomMessage = () => {
   const lines = []
-  const lineCount = Math.floor(Math.random() * 3) + 1
+  const lineCount = props.simple ? 2 : Math.floor(Math.random() * 3) + 1
   for (let i = 0; i < lineCount; i++) {
     lines.push(Math.floor(Math.random() * 40) + 40)
   }
 
+  const stampCount = Math.random() < 0.3 ? Math.floor(Math.random() * 5) + 1 : 0
+
   return {
     lines,
-    hasQuote: Math.random() < 0.1,
-    hasImage: Math.random() < 0.1,
-    hasFile: Math.random() < 0.05,
-    stamps: Math.random() < 0.3 ? Math.floor(Math.random() * 5) + 1 : 0
+    hasQuote: props.simple ? false : Math.random() < 0.1,
+    hasImage: props.simple ? false : Math.random() < 0.1,
+    hasFile: props.simple ? false : Math.random() < 0.05,
+    stamps: props.simple ? 3 : stampCount
   }
 }