diff --git a/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue b/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue
index 87d3508a33..f670d7ac5c 100644
--- a/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue
+++ b/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,
@@ -137,7 +140,7 @@ const toNewMessage = () => {
     }
   }
 
-  const element = unrefElement(scrollerRef)
+  const element = unrefElement(scrollerRef.value?.rootRef)
   if (!element) return
 
   element.scrollTo({
@@ -146,7 +149,7 @@ const toNewMessage = () => {
 }
 
 const handleScroll = () => {
-  const element = unrefElement(scrollerRef)
+  const element = unrefElement(scrollerRef.value?.rootRef)
   if (!element || isLoading.value) return
   const { scrollTop, scrollHeight, clientHeight } = element
   showToNewMessageButton.value = scrollHeight - 2 * clientHeight > scrollTop
diff --git a/src/components/Main/MainView/MessageElement/ClipElement.vue b/src/components/Main/MainView/MessageElement/ClipElement.vue
index 328825d9e9..6c3df45523 100644
--- a/src/components/Main/MainView/MessageElement/ClipElement.vue
+++ b/src/components/Main/MainView/MessageElement/ClipElement.vue
@@ -40,8 +40,9 @@ import type { MessageId } from '/@/types/entity-ids'
 import MessageQuoteListItemFooter from './Embeddings/MessageQuoteListItemFooter.vue'
 import MessageContents from './MessageContents.vue'
 import MessageTools, { useMessageToolsHover } from './MessageTools.vue'
-import type { ChangeHeightData } from './composables/useElementRenderObserver'
-import useElementRenderObserver from './composables/useElementRenderObserver'
+import useElementRenderObserver, {
+  type ChangeHeightData
+} from './composables/useElementRenderObserver'
 
 const props = defineProps<{
   messageId: MessageId
diff --git a/src/components/Main/MainView/MessageElement/MessageContents.vue b/src/components/Main/MainView/MessageElement/MessageContents.vue
index 1f3bf65b3b..e556d34fe7 100644
--- a/src/components/Main/MainView/MessageElement/MessageContents.vue
+++ b/src/components/Main/MainView/MessageElement/MessageContents.vue
@@ -8,7 +8,11 @@
       :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"
@@ -16,22 +20,24 @@
         :channel-id="message.channelId"
         @finish-editing="finishEditing"
       />
-      <MessageQuoteList
-        v-if="embeddingsState.quoteMessageIds.length > 0"
-        :class="$style.messageEmbeddingsList"
-        :parent-message-channel-id="message.channelId"
-        :message-ids="embeddingsState.quoteMessageIds"
-      />
-      <MessageFileList
-        v-if="embeddingsState.fileIds.length > 0"
-        :class="$style.messageEmbeddingsList"
-        :channel-id="message.channelId"
-        :file-ids="embeddingsState.fileIds"
-      />
-      <MessageOgpList
-        v-if="embeddingsState.externalUrls.length > 0"
-        :external-urls="embeddingsState.externalUrls"
-      />
+      <DeferredRender :disabled="isInitialLoad">
+        <MessageQuoteList
+          v-if="embeddingsState.quoteMessageIds.length > 0"
+          :class="$style.messageEmbeddingsList"
+          :parent-message-channel-id="message.channelId"
+          :message-ids="embeddingsState.quoteMessageIds"
+        />
+        <MessageFileList
+          v-if="embeddingsState.fileIds.length > 0"
+          :class="$style.messageEmbeddingsList"
+          :channel-id="message.channelId"
+          :file-ids="embeddingsState.fileIds"
+        />
+        <MessageOgpList
+          v-if="embeddingsState.externalUrls.length > 0"
+          :external-urls="embeddingsState.externalUrls"
+        />
+      </DeferredRender>
     </div>
   </div>
 </template>
@@ -39,6 +45,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
+import DeferredRender from '/@/components/UI/DeferredRender.vue'
 import MarkdownContent from '/@/components/UI/MarkdownContent.vue'
 import UserIcon from '/@/components/UI/UserIcon.vue'
 import useEmbeddings from '/@/composables/message/useEmbeddings'
@@ -55,6 +62,7 @@ import MessageHeader from './MessageHeader.vue'
 
 const props = defineProps<{
   messageId: MessageId
+  isInitialLoad?: boolean
 }>()
 
 const { messagesMap } = useMessagesStore()
diff --git a/src/components/Main/MainView/MessageElement/MessageElement.vue b/src/components/Main/MainView/MessageElement/MessageElement.vue
index 266e052c85..8296f64ece 100644
--- a/src/components/Main/MainView/MessageElement/MessageElement.vue
+++ b/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"
@@ -55,8 +56,9 @@ import type { MessageId, UserId } from '/@/types/entity-ids'
 import MessageContents from './MessageContents.vue'
 import MessagePinned from './MessagePinned.vue'
 import MessageStampList from './MessageStampList.vue'
-import type { ChangeHeightData } from './composables/useElementRenderObserver'
-import useElementRenderObserver from './composables/useElementRenderObserver'
+import useElementRenderObserver, {
+  type ChangeHeightData
+} from './composables/useElementRenderObserver'
 
 const props = withDefaults(
   defineProps<{
@@ -64,10 +66,12 @@ const props = withDefaults(
     pinnedUserId?: UserId
     isEntryMessage?: boolean
     isArchived?: boolean
+    isInitialLoad?: boolean
   }>(),
   {
     isEntryMessage: false,
-    isArchived: false
+    isArchived: false,
+    isInitialLoad: false
   }
 )
 
diff --git a/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts b/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts
index b25827c88a..98eae97cb3 100644
--- a/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts
+++ b/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts
@@ -21,30 +21,27 @@ const useElementRenderObserver = (
     quoteMessageIds: readonly MessageId[]
     fileIds: readonly FileId[]
     externalUrls: readonly ExternalUrl[]
+    hasCodeBlock: boolean
   }>,
   emit: ((name: 'entryMessageLoaded', relativePos: number) => void) &
     ((name: 'changeHeight', data: ChangeHeightData) => void)
 ) => {
   const route = useRoute()
 
-  let lastHeight = 0
-  let lastBottom = 0
-  let lastTop = 0
+  type State = {
+    height: number
+    bottom: number
+    top: number
+  }
+
+  let prevState: State | null = null
+
   const resizeObserver = new ResizeObserver(entries => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const entry = entries[0]!
     const { height, bottom, top } = entry.target.getBoundingClientRect()
 
-    emit('changeHeight', {
-      id: messageId.value,
-      heightDiff: height - lastHeight,
-      top,
-      bottom,
-      lastTop,
-      lastBottom
-    })
-
-    if (lastHeight === 0) {
+    if (prevState === null) {
       // 初回に高さが変化した場合、初期レンダリング完了とみなす
       // これ以降新規にobserveしないためにwatcherを止める
       stop()
@@ -56,23 +53,32 @@ const useElementRenderObserver = (
         const { top } = bodyRef.value.getBoundingClientRect()
         emit('entryMessageLoaded', top - parentTop)
       }
+    } else {
+      emit('changeHeight', {
+        id: messageId.value,
+        heightDiff: height - prevState.height,
+        top,
+        bottom,
+        lastTop: prevState.top,
+        lastBottom: prevState.bottom
+      })
     }
 
-    lastHeight = height
-    lastBottom = bottom
-    lastTop = top
+    prevState = { height, bottom, top }
   })
+
   const stop = watchEffect(
     () => {
       if (
         (unref(isEntryMessage) ||
           embeddingsState.quoteMessageIds.length > 0 ||
           embeddingsState.fileIds.length > 0 ||
-          embeddingsState.externalUrls.length > 0) &&
+          embeddingsState.externalUrls.length > 0 ||
+          embeddingsState.hasCodeBlock) &&
         bodyRef.value
       ) {
         /*
-          引用 / 添付ファイル / 外部URL がある場合か
+          引用 / 添付ファイル / 外部URL / コードブロック がある場合か
           エントリーメッセージは
           高さ監視をする
         */
@@ -82,6 +88,7 @@ const useElementRenderObserver = (
     // 監視前に高さが変わってしまうのを防止するためにsyncを指定する
     { flush: 'sync' }
   )
+
   watch(
     () => route.path,
     () =>
diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index 00e21cb7e8..d18b2140d5 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -1,61 +1,120 @@
 <template>
-  <div
-    ref="rootRef"
-    :class="$style.root"
-    @scroll.passive="
-      () => {
-        handleScroll()
-        emit('scrollPassive')
-      }
-    "
-    @click="onClick"
-  >
+  <div :class="$style.container">
     <div
-      v-if="stampsMapFetched"
-      :class="$style.viewport"
-      data-testid="channel-viewport"
+      ref="rootRef"
+      :class="[$style.root, !ready && $style.hidden]"
+      @scroll.passive="
+        () => {
+          handleScroll()
+          emit('scrollPassive')
+        }
+      "
+      @click="onClick"
     >
-      <MessagesScrollerSeparator
-        v-if="isReachedEnd"
-        title="これ以上メッセージはありません"
-        :class="$style.noMoreSeparator"
-      />
-      <template v-for="messageId in messageIds" :key="messageId">
-        <slot
-          :message-id="messageId"
-          :on-change-height="onChangeHeight"
-          :on-entry-message-loaded="onEntryMessageLoaded"
+      <div
+        v-if="stampsMapFetched"
+        :class="$style.viewport"
+        data-testid="channel-viewport"
+      >
+        <MessagesSkeleton
+          v-if="!isReachedEnd"
+          ref="topSkeletonRef"
+          :simple="!enableProactiveLoading"
+          :count="isInitialLoad ? 10 : 3"
+          :class="$style.edgeSkeleton"
+        />
+        <MessagesScrollerSeparator
+          v-if="isReachedEnd"
+          title="これ以上メッセージはありません"
+          :class="$style.noMoreSeparator"
         />
-      </template>
+        <template v-for="messageId in messageIds" :key="messageId">
+          <slot
+            :message-id="messageId"
+            :on-change-height="onChangeHeight"
+            :on-entry-message-loaded="onEntryMessageLoaded"
+          />
+        </template>
+        <MessagesSkeleton
+          v-if="enableProactiveLoading && !isReachedLatest"
+          ref="bottomSkeletonRef"
+          reversed
+          instant
+          :simple="!enableProactiveLoading"
+          :count="isInitialLoad ? 10 : 3"
+          :class="$style.edgeSkeleton"
+        />
+      </div>
+      <div :class="$style.bottomSpacer" />
     </div>
-    <div :class="$style.bottomSpacer" />
   </div>
 </template>
 
 <script lang="ts">
 import type { ComponentPublicInstance, Ref } from 'vue'
-import { nextTick, onMounted, reactive, shallowRef, watch } from 'vue'
+import { computed, nextTick, onMounted, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-import { useEventListener } from '@vueuse/core'
-import { throttle } from 'throttle-debounce'
+import { unrefElement, useEventListener, useResizeObserver } from '@vueuse/core'
+import { debounce, throttle } from 'throttle-debounce'
 
 import { useOpenLink } from '/@/composables/useOpenLink'
+import useResponsive from '/@/composables/useResponsive'
 import { embeddingOrigin } from '/@/lib/apis'
+import { isIOS } from '/@/lib/dom/browser'
 import { toggleSpoiler } from '/@/lib/markdown/spoiler'
 import { RouteName, isMessageScrollerRoute } from '/@/router'
 import { useStampsStore } from '/@/store/entities/stamps'
 import { useMainViewStore } from '/@/store/ui/mainView'
 import type { MessageId } from '/@/types/entity-ids'
 
-import useMessageScrollerElementResizeObserver from './composables/useMessageScrollerElementResizeObserver'
+import MessagesSkeleton from './MessagesSkeleton.vue'
+import useMessageScroller from './composables/useMessageScroller'
 import type { LoadingDirection } from './composables/useMessagesFetcher'
 
 export interface MessageScrollerInstance extends ComponentPublicInstance {
-  $el: HTMLDivElement
+  rootRef: HTMLDivElement
 }
 
-const LOAD_MORE_THRESHOLD = 10
+const MIN_THRESHOLD = 1000 // 最小の閾値
+const THRESHOLD_INCREMENT = 1500 // 端に到達するたびに増加させる閾値
+const DECAY_PER_SECOND = 0.6 // 一秒あたりの減衰率
+
+/**
+ * 端に到達するたびに閾値を増加させ、時間経過で減衰する
+ */
+const useDynamicLoadThreshold = () => {
+  let currentThreshold = MIN_THRESHOLD
+  let lastTime = performance.now()
+  let wasNearEdge = false
+
+  const getThreshold = () => currentThreshold
+
+  const update = (top: number, bottom: number) => {
+    const now = performance.now()
+    const deltaSeconds = (now - lastTime) / 1000
+    lastTime = now
+
+    // 端に近いかどうか判定
+    const isNearEdge = top < currentThreshold || bottom < currentThreshold
+
+    // 端に到達したら閾値を増やす
+    if (isNearEdge && !wasNearEdge) {
+      currentThreshold += THRESHOLD_INCREMENT
+    } else {
+      // 時間減衰を適用
+      const decayFactor = Math.pow(DECAY_PER_SECOND, deltaSeconds)
+      currentThreshold = Math.max(
+        MIN_THRESHOLD,
+        MIN_THRESHOLD + (currentThreshold - MIN_THRESHOLD) * decayFactor
+      )
+    }
+
+    wasNearEdge = isNearEdge
+  }
+
+  return { getThreshold, update }
+}
 
 type HTMLElementTargetMouseEvent = MouseEvent & { target: HTMLElement }
 
@@ -140,6 +199,7 @@ const props = withDefaults(
     isReachedEnd: boolean
     isReachedLatest: boolean
     isLoading?: boolean
+    isInitialLoad?: boolean
     entryMessageId?: MessageId
     lastLoadingDirection: LoadingDirection
   }>(),
@@ -162,15 +222,38 @@ const { lastScrollPosition } = useMainViewStore()
 const { stampsMapFetched } = useStampsStore()
 
 const rootRef = shallowRef<HTMLElement | null>(null)
-const state = reactive({
-  height: 0,
-  scrollTop: lastScrollPosition.value,
-  // 古いメッセージを読み込むとき、読み込み開始直後は高さの調整を無効化する
-  skipResizeAdjustment: false
-})
+const topSkeletonRef = shallowRef<ComponentPublicInstance | null>(null)
+const bottomSkeletonRef = shallowRef<ComponentPublicInstance | null>(null)
+
+// スケルトンの高さをキャッシュ（getBoundingClientRectの毎回呼び出しを回避）
+const topSkeletonHeight = shallowRef(0)
+const bottomSkeletonHeight = shallowRef(0)
+
+// ResizeObserverでスケルトン高さを監視
+useResizeObserver(
+  () => topSkeletonRef.value?.$el,
+  () => {
+    topSkeletonHeight.value =
+      unrefElement(topSkeletonRef)?.getBoundingClientRect().height ?? 0
+  }
+)
+
+useResizeObserver(
+  () => bottomSkeletonRef.value?.$el,
+  () => {
+    bottomSkeletonHeight.value =
+      unrefElement(bottomSkeletonRef)?.getBoundingClientRect().height ?? 0
+  }
+)
+
+const { isMobile } = useResponsive()
+const enableProactiveLoading = computed(() => !isIOS() && !isMobile.value)
+
+const { onChangeHeight, onEntryMessageLoaded, ready, state } =
+  useMessageScroller(rootRef, props, topSkeletonHeight)
 
-const { onChangeHeight, onEntryMessageLoaded } =
-  useMessageScrollerElementResizeObserver(rootRef, props, state)
+// 初期スクロール位置を設定
+state.scrollTop = lastScrollPosition.value
 
 onMounted(() => {
   // 表示されている
@@ -196,83 +279,38 @@ watch(
   }
 )
 
-watch(
-  () => props.messageIds,
-  (ids, prevIds) => {
-    if (!rootRef.value) return
-    /* state.height の更新を忘れないようにすること */
-
-    const newHeight = rootRef.value.scrollHeight
-    if (
-      props.lastLoadingDirection === 'latest' ||
-      props.lastLoadingDirection === 'former'
-    ) {
-      if (ids.length - prevIds.length === -1) {
-        // 削除された場合は何もしない
-        state.height = newHeight
-        return
-      }
-      // XXX: 追加時にここは0になる
-      if (ids.length - prevIds.length === 0) {
-        const scrollBottom =
-          rootRef.value.scrollTop + rootRef.value.clientHeight
-
-        // 一番下のメッセージあたりを見ているときに、
-        // 新規に一つ追加された場合は一番下までスクロール
-        if (state.height - 50 <= scrollBottom) {
-          rootRef.value.scrollTo({
-            top: newHeight
-          })
-        }
-        state.height = newHeight
-        return
-      }
-      //上に追加された時はスクロール位置を変更する。
-      if (props.lastLoadingDirection === 'former') {
-        // onChangeHeight の調整を一時的に無効化
-        state.skipResizeAdjustment = true
-        rootRef.value.scrollTo({
-          top: newHeight - state.height
-        })
-        state.height = newHeight
-        // 十分に DOMが更新されたら無効化を解除
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            state.skipResizeAdjustment = false
-          })
-        })
-      }
-
-      if (props.lastLoadingDirection === 'latest') {
-        // チャンネルを移動したとき、
-        rootRef.value.scrollTo({
-          top: newHeight
-        })
-        state.height = newHeight
-      }
-    } else state.height = newHeight
-  },
-  { deep: true, flush: 'post' }
-)
+const { getThreshold, update: updateThreshold } = useDynamicLoadThreshold()
 
 const requestLoadMessages = () => {
   if (!rootRef.value) return
-  const { clientHeight, scrollHeight, scrollTop } = rootRef.value
-  state.scrollTop = scrollTop
+  state.scrollTop = rootRef.value.scrollTop
+
+  const top = rootRef.value.scrollTop - topSkeletonHeight.value
+  const bottom =
+    rootRef.value.scrollHeight -
+    (rootRef.value.scrollTop +
+      rootRef.value.clientHeight +
+      bottomSkeletonHeight.value)
+
+  if (enableProactiveLoading.value) {
+    updateThreshold(top, bottom)
+  }
+
+  const threshold = getThreshold()
 
   if (props.isLoading) return
-  if (state.scrollTop < LOAD_MORE_THRESHOLD && !props.isReachedEnd) {
+  if (top < threshold && !props.isReachedEnd) {
     emit('requestLoadFormer')
   }
-  if (
-    scrollHeight - state.scrollTop - clientHeight < LOAD_MORE_THRESHOLD &&
-    !props.isReachedLatest
-  ) {
+  if (bottom < threshold && !props.isReachedLatest) {
     emit('requestLoadLatter')
   }
 }
 
-const handleScroll = throttle(17, requestLoadMessages)
+const handleScroll = (enableProactiveLoading.value ? throttle : debounce)(
+  enableProactiveLoading.value ? 24 : 200,
+  requestLoadMessages
+)
 
 const visibilitychangeListener = () => {
   if (document.visibilityState === 'visible') {
@@ -285,13 +323,20 @@ useEventListener(document, 'visibilitychange', visibilitychangeListener)
 
 const { onClick } = useMarkdownInternalHandler()
 useScrollRestoration(rootRef, state)
+
+defineExpose({ rootRef })
 </script>
 
 <style lang="scss" module>
+.container {
+  height: 100%;
+  position: relative;
+  overflow-y: hidden;
+}
+
 .root {
   height: 100%;
   overflow-y: scroll;
-  padding: 12px 0;
   backface-visibility: hidden;
   contain: var(--contain-strict);
   // overflow-anchorはデフォルトでautoだが、Safariが対応していないので、
@@ -299,6 +344,9 @@ useScrollRestoration(rootRef, state)
   overflow-anchor: none;
   // iOSで無限にロードが走るのを防止する
   -webkit-overflow-scrolling: auto;
+  // scroll-behavior: auto;
+  overscroll-behavior: none;
+  padding-bottom: 12px;
 }
 
 .viewport {
@@ -321,4 +369,25 @@ useScrollRestoration(rootRef, state)
 .noMoreSeparator {
   @include color-ui-secondary;
 }
+
+.skeleton {
+  position: absolute;
+  inset: 0;
+  opacity: 1;
+  transition: opacity 0.3s ease-in;
+  margin-bottom: 24px;
+
+  &.hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+.edgeSkeleton {
+  flex-shrink: 0;
+}
 </style>
diff --git a/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue b/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue
new file mode 100644
index 0000000000..4aed495ae0
--- /dev/null
+++ b/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue
@@ -0,0 +1,229 @@
+<template>
+  <div :class="[$style.container, props.reversed && $style.reversed]">
+    <div
+      v-for="(item, i) in items"
+      :key="i"
+      :class="$style.messageItem"
+      :style="{
+        animationDelay: props.instant ? '0' : `${i * 30}ms`
+      }"
+    >
+      <div :class="$style.avatar" />
+      <div :class="$style.content">
+        <div :class="$style.header">
+          <div :class="[$style.skeleton, $style.name]" />
+          <div :class="[$style.skeleton, $style.badge]" />
+          <div :class="[$style.skeleton, $style.id]" />
+          <div :class="[$style.skeleton, $style.time]" />
+        </div>
+        <div :class="$style.body">
+          <div
+            v-for="(width, j) in item.lines"
+            :key="j"
+            :class="[$style.skeleton, $style.text]"
+            :style="{ width: `${width}%` }"
+          />
+        </div>
+        <div v-if="item.hasQuote" :class="$style.quote">
+          <div :class="[$style.skeleton, $style.text]" style="width: 30%" />
+          <div :class="[$style.skeleton, $style.text]" style="width: 60%" />
+        </div>
+        <div v-if="item.hasImage" :class="[$style.skeleton, $style.image]" />
+        <div v-if="item.hasFile" :class="[$style.skeleton, $style.file]" />
+        <div v-if="item.stamps > 0" :class="$style.stamps">
+          <div
+            v-for="j in item.stamps"
+            :key="j"
+            :class="[$style.skeleton, $style.stampItem]"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    count?: number
+    simple?: boolean
+    reversed?: boolean
+    instant?: boolean
+  }>(),
+  {
+    count: 16,
+    simple: false,
+    reversed: false,
+    instant: false
+  }
+)
+
+const generateRandomMessage = () => {
+  const lines = []
+  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: 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
+  }
+}
+
+const items = computed(() =>
+  Array.from({ length: props.count }, generateRandomMessage)
+)
+</script>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  gap: 16px;
+  padding: 12px 16px;
+  overflow: hidden;
+
+  flex-direction: column-reverse;
+  justify-content: flex-start;
+
+  &.reversed {
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+}
+
+.messageItem {
+  display: flex;
+  padding-block: 4px;
+  gap: 16px;
+  animation: fadeIn 0.3s ease-in-out forwards;
+  opacity: 0;
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--specific-skeleton-background, rgba(128, 128, 128, 0.15));
+  flex-shrink: 0;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.quote {
+  border-left: 3px solid
+    var(--specific-skeleton-background, rgba(128, 128, 128, 0.15));
+  padding-left: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-block: 4px;
+}
+
+.image {
+  width: min(80%, 300px);
+  aspect-ratio: 16/9;
+  margin-block: 4px;
+}
+
+.file {
+  width: min(100%, 360px);
+  height: 48px;
+  margin-block: 4px;
+}
+
+.stamps {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+
+.stampItem {
+  width: 48px;
+  height: 24px;
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--specific-skeleton-background, rgba(128, 128, 128, 0.15)) 25%,
+    var(--specific-skeleton-highlight, rgba(128, 128, 128, 0.25)) 50%,
+    var(--specific-skeleton-background, rgba(128, 128, 128, 0.15)) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 4px;
+}
+
+.name {
+  width: 120px;
+  height: 18px;
+}
+
+.badge {
+  width: 28px;
+  height: 18px;
+  border-radius: 4px;
+}
+
+.id {
+  width: 60px;
+  height: 14px;
+}
+
+.time {
+  width: 50px;
+  height: 14px;
+}
+
+.text {
+  height: 14px;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts b/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
new file mode 100644
index 0000000000..87a9520b8f
--- /dev/null
+++ b/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
@@ -0,0 +1,152 @@
+import type { MaybeRefOrGetter, Reactive, Ref } from 'vue'
+import { reactive, toValue, watch } from 'vue'
+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 } from '/@/lib/basic/timer'
+import type { MessageId } from '/@/types/entity-ids'
+
+const useMessageScroller = (
+  rootRef: Ref<HTMLElement | null>,
+  scrollerProps: Reactive<{
+    messageIds: MessageId[]
+    lastLoadingDirection: LoadingDirection
+    entryMessageId?: MessageId
+  }>,
+  topSkeletonHeight: MaybeRefOrGetter<number> = 0
+) => {
+  const ready = ref(false)
+
+  const state = reactive({
+    height: 0,
+    scrollTop: 0
+  })
+
+  const onChangeHeight = async (payload: ChangeHeightData) => {
+    if (!rootRef.value) return
+
+    if (
+      scrollerProps.lastLoadingDirection === 'around' &&
+      scrollerProps.entryMessageId
+    ) {
+      // エントリーメッセージがあり、かつ初回ロードの場合
+      // エントリーより上にあった場合はスクロール位置をずらす
+      let isBeforeEntryMessage = false
+      for (const messageId of scrollerProps.messageIds) {
+        if (messageId === scrollerProps.entryMessageId) break
+        if (messageId === payload.id) {
+          isBeforeEntryMessage = true
+          break
+        }
+      }
+
+      if (isBeforeEntryMessage) {
+        rootRef.value.scrollTo({
+          top: rootRef.value.scrollTop + payload.heightDiff
+        })
+        state.height = rootRef.value.scrollHeight
+      }
+    } else if (
+      scrollerProps.lastLoadingDirection === 'latest' ||
+      scrollerProps.lastLoadingDirection === 'former'
+    ) {
+      const scrollerTop =
+        rootRef.value.getBoundingClientRect().top + toValue(topSkeletonHeight)
+
+      // 視界より上にある要素の高さが変わった場合のみ補正する
+      if (payload.top < scrollerTop) {
+        rootRef.value.scrollTo({
+          top: rootRef.value.scrollTop + payload.heightDiff
+        })
+      }
+
+      const scrollBottom = rootRef.value.scrollTop + rootRef.value.clientHeight
+
+      // 末尾付近を閲覧しているときは，末尾を保つ
+      if (state.height - scrollBottom <= 50) {
+        if (!rootRef.value) return
+
+        // 複数の onChangeHeight が同フレーム内に複数回呼ばれる場合があるので，
+        // すべての更新を待ってからスクロールする
+        await defer()
+        rootRef.value.scrollTo({ top: rootRef.value.scrollHeight })
+      }
+
+      state.height = rootRef.value.scrollHeight
+    }
+  }
+
+  const onEntryMessageLoaded = (relativePos: number) => {
+    if (!rootRef.value) return
+
+    const rootHeight = rootRef.value.getBoundingClientRect().height
+    rootRef.value.scrollTo({ top: relativePos - rootHeight / 3 })
+  }
+
+  watch(
+    () => scrollerProps.messageIds,
+    (ids, prevIds) => {
+      if (!rootRef.value) return
+      /* state.height の更新を忘れないようにすること */
+
+      const newHeight = rootRef.value.scrollHeight
+      if (
+        scrollerProps.lastLoadingDirection === 'latest' ||
+        scrollerProps.lastLoadingDirection === 'former'
+      ) {
+        if (ids.length - prevIds.length === -1) {
+          // 削除された場合は何もしない
+          state.height = newHeight
+          return
+        }
+        // XXX: 追加時にここは0になる
+        if (ids.length - prevIds.length === 0) {
+          const scrollBottom =
+            rootRef.value.scrollTop + rootRef.value.clientHeight
+
+          // 一番下のメッセージあたりを見ているときに、
+          // 新規に一つ追加された場合は一番下までスクロール
+          if (state.height - 50 <= scrollBottom) {
+            rootRef.value.scrollTo({ top: newHeight })
+          }
+          state.height = newHeight
+
+          return
+        }
+        //上に追加された時はスクロール位置を変更する。
+        if (scrollerProps.lastLoadingDirection === 'former') {
+          rootRef.value.scrollTo({
+            top: rootRef.value.scrollTop + newHeight - state.height
+          })
+          state.height = newHeight
+        }
+
+        if (scrollerProps.lastLoadingDirection === 'latest') {
+          ready.value = false
+
+          // チャンネルを移動したとき、
+          rootRef.value.scrollTo({
+            top: newHeight
+          })
+
+          state.height = newHeight
+
+          defer(() => {
+            ready.value = true
+          })
+        }
+      } else state.height = newHeight
+    },
+    { deep: true, flush: 'post' }
+  )
+
+  return {
+    onChangeHeight,
+    onEntryMessageLoaded,
+    ready,
+    state
+  }
+}
+
+export default useMessageScroller
diff --git a/src/components/Main/MainView/MessagesScroller/composables/useMessageScrollerElementResizeObserver.ts b/src/components/Main/MainView/MessagesScroller/composables/useMessageScrollerElementResizeObserver.ts
deleted file mode 100644
index a5d5a1effa..0000000000
--- a/src/components/Main/MainView/MessagesScroller/composables/useMessageScrollerElementResizeObserver.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { Ref } from 'vue'
-
-import type { ChangeHeightData } from '/@/components/Main/MainView/MessageElement/composables/useElementRenderObserver'
-import type { MessageId } from '/@/types/entity-ids'
-
-import type { LoadingDirection } from './useMessagesFetcher'
-
-const useMessageScrollerElementResizeObserver = (
-  rootRef: Ref<HTMLElement | null>,
-  scrollerProps: {
-    messageIds: MessageId[]
-    lastLoadingDirection: LoadingDirection
-    entryMessageId?: MessageId
-  },
-  viewPortState: {
-    height: number
-    skipResizeAdjustment?: boolean
-  }
-) => {
-  const onChangeHeight = (payload: ChangeHeightData) => {
-    if (!rootRef.value) {
-      return
-    }
-
-    if (
-      scrollerProps.lastLoadingDirection === 'around' &&
-      scrollerProps.entryMessageId
-    ) {
-      // エントリーメッセージがあり、かつ初回ロードの場合
-      // エントリーより上にあった場合はスクロール位置をずらす
-      let isBeforeEntryMessage = false
-      for (const messageId of scrollerProps.messageIds) {
-        if (messageId === scrollerProps.entryMessageId) break
-        if (messageId === payload.id) {
-          isBeforeEntryMessage = true
-          break
-        }
-      }
-
-      if (isBeforeEntryMessage) {
-        rootRef.value.scrollTop += payload.heightDiff
-        viewPortState.height = rootRef.value.scrollHeight
-      }
-    } else if (
-      scrollerProps.lastLoadingDirection === 'latest' ||
-      scrollerProps.lastLoadingDirection === 'former'
-    ) {
-      // 古いメッセージを読み込んですぐはここで高さの調整をしない
-      if (viewPortState.skipResizeAdjustment) {
-        return
-      }
-      rootRef.value.scrollTop += payload.heightDiff
-      viewPortState.height = rootRef.value.scrollHeight
-    }
-  }
-
-  const onEntryMessageLoaded = (relativePos: number) => {
-    if (!rootRef.value) {
-      return
-    }
-    const rootHeight = rootRef.value.getBoundingClientRect().height
-    rootRef.value.scrollTop = relativePos - rootHeight / 3
-  }
-
-  return { onChangeHeight, onEntryMessageLoaded }
-}
-
-export default useMessageScrollerElementResizeObserver
diff --git a/src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts b/src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts
index de7079ff7f..1ad11a5759 100644
--- a/src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts
+++ b/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 {
diff --git a/src/components/UI/DeferredRender.vue b/src/components/UI/DeferredRender.vue
new file mode 100644
index 0000000000..2818b50ea0
--- /dev/null
+++ b/src/components/UI/DeferredRender.vue
@@ -0,0 +1,20 @@
+<template>
+  <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>
diff --git a/src/components/UI/MarkdownContent.vue b/src/components/UI/MarkdownContent.vue
index 2d125db7d4..e279177154 100644
--- a/src/components/UI/MarkdownContent.vue
+++ b/src/components/UI/MarkdownContent.vue
@@ -10,17 +10,25 @@
 <script lang="ts" setup>
 import { createVNode, onMounted, ref, render, watch } from 'vue'
 
+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>()
 
 const foldWrapClass = 'fold-wrap'
 
-const applyFoldCodeBlock = () => {
+const applyFoldableCodeBlock = () => {
   const content = contentRef.value
   if (content === undefined) return
 
@@ -41,17 +49,13 @@ const applyFoldCodeBlock = () => {
 }
 
 onMounted(() => {
-  applyFoldCodeBlock()
-})
-watch(
-  () => props.content,
-  () => {
-    applyFoldCodeBlock()
-  },
-  {
-    flush: 'post'
+  if (props.deferOnMounted) {
+    defer(applyFoldableCodeBlock)
+    return
   }
-)
+  applyFoldableCodeBlock()
+})
+watch(() => props.content, applyFoldableCodeBlock, { flush: 'post' })
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/UI/SlideDown.vue b/src/components/UI/SlideDown.vue
index 577a5393c4..3f3c6a65be 100644
--- a/src/components/UI/SlideDown.vue
+++ b/src/components/UI/SlideDown.vue
@@ -1,10 +1,10 @@
 <template>
   <transition
     name="slide-vertical"
-    @enter="setScrollHeight"
-    @after-enter="unsetHeight"
-    @before-leave="setCurrentHeight"
-    @leave="unsetHeight"
+    @enter="setScrollHeight($event as HTMLElement)"
+    @leave="unsetHeight($event as HTMLElement)"
+    @after-enter="unsetHeight($event as HTMLElement)"
+    @before-leave="setCurrentHeight($event as HTMLElement)"
   >
     <div v-if="isOpen" :class="$style.wrapper">
       <slot />
@@ -13,26 +13,25 @@
 </template>
 
 <script lang="ts" setup>
-import { rAF } from '/@/lib/basic/timer'
+import { defer } from '/@/lib/basic/timer'
 
 defineProps<{
   isOpen: boolean
 }>()
 
-const setScrollHeight = async ($el: Element) => {
-  // フレームずらさないとscrollHeightが0になるため
-  await rAF()
-  await rAF()
+const setScrollHeight = async ($el: HTMLElement) => {
+  // scrollHeight が 0 にならないようにフレームをずらす
+  await defer()
   setCurrentHeight($el)
 }
-const setCurrentHeight = ($el: Element) => {
-  ;($el as HTMLElement).style.height = `${$el.scrollHeight}px`
+
+const setCurrentHeight = ($el: HTMLElement) => {
+  $el.style.height = `${$el.scrollHeight}px`
 }
-const unsetHeight = async ($el: Element) => {
-  // フレームずらさないと処理がまとめられてheightのセットがされないことにされるため
-  await rAF()
-  await rAF()
-  ;($el as HTMLElement).style.height = null as unknown as string
+const unsetHeight = async ($el: HTMLElement) => {
+  // 処理がまとめられて height のセットがされない場合があるので，フレームをずらす
+  await defer()
+  $el.style.height = null as unknown as string
 }
 </script>
 
diff --git a/src/composables/message/useEmbeddings.ts b/src/composables/message/useEmbeddings.ts
index fe822a0256..7f4c5cbf19 100644
--- a/src/composables/message/useEmbeddings.ts
+++ b/src/composables/message/useEmbeddings.ts
@@ -5,9 +5,12 @@ import { useMessagesView } from '/@/store/domain/messagesView'
 import type { MessageId } from '/@/types/entity-ids'
 
 const useEmbeddings = (props: { messageId: MessageId }) => {
-  const { embeddingsMap } = useMessagesView()
+  const { embeddingsMap, renderedContentMap } = useMessagesView()
 
   const embeddings = computed(() => embeddingsMap.value.get(props.messageId))
+  const renderedContent = computed(
+    () => renderedContentMap.value.get(props.messageId) ?? ''
+  )
   const state = reactive({
     fileIds: computed(
       () => embeddings.value?.filter(isFile).map(e => e.id) ?? []
@@ -21,7 +24,8 @@ const useEmbeddings = (props: { messageId: MessageId }) => {
           embeddings.value?.filter(isExternalUrl).map(e => e.url) ?? []
         )
       ].slice(0, 2)
-    )
+    ),
+    hasCodeBlock: computed(() => renderedContent.value.includes('</pre>'))
   })
   return { embeddingsState: state }
 }
diff --git a/src/lib/basic/timer.ts b/src/lib/basic/timer.ts
index 212bc7a926..de8c832a5a 100644
--- a/src/lib/basic/timer.ts
+++ b/src/lib/basic/timer.ts
@@ -1,3 +1,5 @@
+import type { Invocable } from '/@/types/utility'
+
 export const wait = (ms: number) =>
   new Promise<void>(resolve => {
     setTimeout(() => {
@@ -5,7 +7,18 @@ export const wait = (ms: number) =>
     }, ms)
   })
 
-export const rAF = () =>
+export const nextFrame = () =>
   new Promise(resolve => {
     requestAnimationFrame(resolve)
   })
+
+export async function defer(): Promise<void>
+export async function defer<Fn extends Invocable>(
+  callback: Fn
+): Promise<Awaited<ReturnType<Fn>>>
+
+export async function defer(callback?: Invocable) {
+  await nextFrame()
+  await nextFrame()
+  return callback?.()
+}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 740f357c73..2ec09a23ab 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -13,6 +13,7 @@
 :root {
   color-scheme: var(--color-scheme);
   caret-color: var(--caret);
+  overscroll-behavior-y: none;
 }
 
 body {
@@ -26,7 +27,7 @@ body {
   scroll-behavior: smooth;
   text-rendering: optimizeLegibility;
   touch-action: manipulation;
-  overscroll-behavior-y: contain;
+  overscroll-behavior-y: none;
 }
 
 img {
diff --git a/tests/unit/lib/basic/timer.spec.ts b/tests/unit/lib/basic/timer.spec.ts
index 92ac018ee9..f8f47ffcbc 100644
--- a/tests/unit/lib/basic/timer.spec.ts
+++ b/tests/unit/lib/basic/timer.spec.ts
@@ -1,28 +1,160 @@
-import { rAF, wait } from '/@/lib/basic/timer'
+import { defer, nextFrame, wait } from '/@/lib/basic/timer'
 
 describe('wait', () => {
-  it('can wait', async () => {
+  it('waits for specified milliseconds and resolves to undefined', async () => {
     const before = Date.now()
-    const p = wait(100)
-    await expect(p).resolves.toBeUndefined()
+    const result = await wait(100)
     const after = Date.now()
 
-    expect(after - before).toBeGreaterThanOrEqual(100 - 1) // 精度の問題か99になることがある
+    expect(result).toBeUndefined()
+    expect(after - before).toBeGreaterThanOrEqual(100 - 1)
+  })
+
+  it('resolves immediately with 0ms', async () => {
+    const before = Date.now()
+    const result = await wait(0)
+    const after = Date.now()
+
+    expect(result).toBeUndefined()
+    expect(after - before).toBeLessThan(50)
+  })
+
+  it('can be awaited multiple times sequentially', async () => {
+    const before = Date.now()
+    await wait(50)
+    await wait(50)
+    const after = Date.now()
+
+    expect(after - before).toBeGreaterThanOrEqual(100 - 1)
+  })
+
+  it('can run concurrently with Promise.all', async () => {
+    const before = Date.now()
+    await Promise.all([wait(50), wait(50), wait(50)])
+    const after = Date.now()
+
+    expect(after - before).toBeGreaterThanOrEqual(50 - 1)
+    expect(after - before).toBeLessThan(150)
   })
 })
 
-describe('rAF', () => {
+describe('nextFrame', () => {
   beforeEach(() => {
-    const spy = vi.spyOn(global, 'requestAnimationFrame')
-    spy.mockClear()
+    vi.spyOn(global, 'requestAnimationFrame').mockClear()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
   })
 
-  it('can wait', async () => {
-    const p = rAF()
+  it('calls requestAnimationFrame', async () => {
+    const p = nextFrame()
 
     expect(requestAnimationFrame).toHaveBeenCalledTimes(1)
     expect(requestAnimationFrame).toHaveBeenLastCalledWith(expect.any(Function))
 
     await expect(p).resolves.toEqual(expect.any(Number))
   })
+
+  it('resolves with timestamp from requestAnimationFrame', async () => {
+    const result = await nextFrame()
+
+    expect(typeof result).toBe('number')
+  })
+
+  it('can be called multiple times sequentially', async () => {
+    await nextFrame()
+    await nextFrame()
+
+    expect(requestAnimationFrame).toHaveBeenCalledTimes(2)
+  })
+})
+
+describe('defer', () => {
+  beforeEach(() => {
+    vi.spyOn(global, 'requestAnimationFrame').mockClear()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('returns undefined when called without callback', async () => {
+    await expect(defer()).resolves.toBeUndefined()
+    expect(requestAnimationFrame).toHaveBeenCalledTimes(2)
+  })
+
+  it('returns callback result when called with callback', async () => {
+    const callback = vi.fn(() => 'result')
+
+    await expect(defer(callback)).resolves.toBe('result')
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(requestAnimationFrame).toHaveBeenCalledTimes(2)
+  })
+
+  it('awaits and returns async callback result', async () => {
+    const callback = vi.fn(async () => {
+      await wait(10)
+      return 'async result'
+    })
+
+    await expect(defer(callback)).resolves.toBe('async result')
+    expect(callback).toHaveBeenCalledTimes(1)
+  })
+
+  it('waits for two frames before executing callback', async () => {
+    const callback = vi.fn(() => 42)
+
+    await defer(callback)
+
+    expect(requestAnimationFrame).toHaveBeenCalledTimes(2)
+    expect(callback).toHaveBeenCalledTimes(1)
+  })
+
+  it('executes callback after frames, not before', async () => {
+    let executed = false
+    const callback = () => {
+      executed = true
+      return 'done'
+    }
+
+    const promise = defer(callback)
+
+    await promise
+    expect(executed).toBe(true)
+  })
+
+  it('returns different types from callback', async () => {
+    expect(await defer(() => 123)).toBe(123)
+    expect(await defer(() => 'string')).toBe('string')
+    expect(await defer(() => ({ key: 'value' }))).toEqual({ key: 'value' })
+    expect(await defer(() => [1, 2, 3])).toEqual([1, 2, 3])
+    expect(await defer(() => null)).toBeNull()
+  })
+
+  it('handles callback that returns a promise', async () => {
+    const asyncCallback = async () => {
+      return Promise.resolve('resolved value')
+    }
+
+    await expect(defer(asyncCallback)).resolves.toBe('resolved value')
+  })
+
+  it('propagates errors from callback', async () => {
+    const errorCallback = () => {
+      throw new Error('callback error')
+    }
+
+    await expect(defer(errorCallback)).rejects.toThrow('callback error')
+  })
+
+  it('propagates errors from async callback', async () => {
+    const asyncErrorCallback = async () => {
+      throw new Error('async callback error')
+    }
+
+    await expect(defer(asyncErrorCallback)).rejects.toThrow(
+      'async callback error'
+    )
+  })
 })