diff --git a/frontend/app/src/components/App.svelte b/frontend/app/src/components/App.svelte
index 613025df2d..29b418cfdd 100644
--- a/frontend/app/src/components/App.svelte
+++ b/frontend/app/src/components/App.svelte
@@ -108,6 +108,8 @@
             setUserUpgradeConcurrency,
             stakeNeuronForSubmittingProposals,
             updateMarketMakerConfig,
+            pauseEventLoop: () => client.pauseEventLoop(),
+            resumeEventLoop: () => client.resumeEventLoop(),
         };
 
         framed.set(window.self !== window.top);
diff --git a/frontend/app/src/components/home/ChatMessage.svelte b/frontend/app/src/components/home/ChatMessage.svelte
index acc0bf580f..a249bf4579 100644
--- a/frontend/app/src/components/home/ChatMessage.svelte
+++ b/frontend/app/src/components/home/ChatMessage.svelte
@@ -54,6 +54,7 @@
     import { filterRightPanelHistory } from "../../stores/rightPanel";
     import { removeQueryStringParam } from "../../utils/urls";
     import Diamond from "../icons/Diamond.svelte";
+    import IntersectionObserverComponent from "./IntersectionObserver.svelte";
 
     const client = getContext<OpenChat>("client");
     const dispatch = createEventDispatcher();
@@ -359,9 +360,9 @@
             });
     }
 
-    function canShare(): boolean {
-        return canShareMessage(msg.content);
-    }
+    $: canShare = canShareMessage(msg.content);
+    $: canForward = client.canForward(msg.content);
+    $: canTranslate = (client.getMessageText(msg.content) ?? "").length > 0;
 
     function sendTip(ev: CustomEvent<PendingCryptocurrencyTransfer>) {
         tipping = undefined;
@@ -373,6 +374,14 @@
             }
         });
     }
+
+    function reportMessage() {
+        showReport = true;
+    }
+
+    function remindMe() {
+        showRemindMe = true;
+    }
 </script>
 
 <svelte:window on:resize={recalculateMediaDimensions} />
@@ -422,234 +431,238 @@
 
 {#if expiresAt === undefined || percentageExpired < 100}
     <div out:fade|local={{ duration: 1000 }} class="message-wrapper" class:last>
-        <div
-            bind:this={msgElement}
-            class="message"
-            class:me
-            data-index={failed ? "" : msg.messageIndex}
-            data-id={failed ? "" : msg.messageId}
-            id={failed ? "" : `event-${eventIndex}`}>
-            {#if showAvatar}
-                <div class="avatar-col">
-                    {#if first}
-                        <div class="avatar" on:click={openUserProfile}>
-                            <Avatar
-                                url={client.userAvatarUrl(sender)}
-                                userId={msg.sender}
-                                size={$mobileWidth ? AvatarSize.Small : AvatarSize.Default} />
-                        </div>
-                    {/if}
-                </div>
-            {/if}
-
-            <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <IntersectionObserverComponent let:intersecting>
             <div
-                bind:this={msgBubbleElement}
-                style={`--max-width: ${maxWidthFraction * 100}%; ${
-                    msgBubbleCalculatedWidth !== undefined
-                        ? `flex: 0 0 ${msgBubbleCalculatedWidth}px`
-                        : undefined
-                }`}
-                on:dblclick={doubleClickMessage}
-                use:longpress={() => messageMenu?.showMenu()}
-                class="message-bubble"
-                class:focused
-                class:editing
-                class:fill={fill && !inert}
+                bind:this={msgElement}
+                class="message"
                 class:me
-                class:inert
-                class:collapsed
-                class:first
-                class:last
-                class:readByMe
-                class:crypto
-                class:failed
-                class:prizeWinner={isPrizeWinner}
-                class:proposal={isProposal && !inert}
-                class:thread={inThread}
-                class:rtl={$rtlStore}>
-                {#if first && !isProposal && !isPrize}
-                    <div class="sender" class:fill class:rtl={$rtlStore}>
-                        <Link underline={"never"} on:click={openUserProfile}>
-                            <h4 class="username" class:fill class:crypto>
-                                {senderDisplayName}
-                            </h4>
-                            <Diamond status={sender?.diamondStatus} />
-                        </Link>
-                        {#if senderTyping}
-                            <span class="typing">
-                                <Typing />
-                            </span>
+                data-index={failed ? "" : msg.messageIndex}
+                data-id={failed ? "" : msg.messageId}
+                id={failed ? "" : `event-${eventIndex}`}>
+                {#if showAvatar}
+                    <div class="avatar-col">
+                        {#if first}
+                            <div class="avatar" on:click={openUserProfile}>
+                                <Avatar
+                                    url={client.userAvatarUrl(sender)}
+                                    userId={msg.sender}
+                                    size={$mobileWidth ? AvatarSize.Small : AvatarSize.Default} />
+                            </div>
                         {/if}
                     </div>
                 {/if}
-                {#if msg.forwarded}
-                    <div class="forwarded">
-                        <div>
-                            <ForwardIcon
-                                size={$iconSize}
-                                color={me
-                                    ? "var(--currentChat-msg-me-muted)"
-                                    : "var(--currentChat-msg-muted)"} />
+
+                <!-- svelte-ignore a11y-no-static-element-interactions -->
+                <div
+                    bind:this={msgBubbleElement}
+                    style={`--max-width: ${maxWidthFraction * 100}%; ${
+                        msgBubbleCalculatedWidth !== undefined
+                            ? `flex: 0 0 ${msgBubbleCalculatedWidth}px`
+                            : undefined
+                    }`}
+                    on:dblclick={doubleClickMessage}
+                    use:longpress={() => messageMenu?.showMenu()}
+                    class="message-bubble"
+                    class:focused
+                    class:editing
+                    class:fill={fill && !inert}
+                    class:me
+                    class:inert
+                    class:collapsed
+                    class:first
+                    class:last
+                    class:readByMe
+                    class:crypto
+                    class:failed
+                    class:prizeWinner={isPrizeWinner}
+                    class:proposal={isProposal && !inert}
+                    class:thread={inThread}
+                    class:rtl={$rtlStore}>
+                    {#if first && !isProposal && !isPrize}
+                        <div class="sender" class:fill class:rtl={$rtlStore}>
+                            <Link underline={"never"} on:click={openUserProfile}>
+                                <h4 class="username" class:fill class:crypto>
+                                    {senderDisplayName}
+                                </h4>
+                                <Diamond status={sender?.diamondStatus} />
+                            </Link>
+                            {#if senderTyping}
+                                <span class="typing">
+                                    <Typing />
+                                </span>
+                            {/if}
                         </div>
-                        <div class="text">{"Forwarded"}</div>
-                    </div>
-                {/if}
-                {#if msg.repliesTo !== undefined && !inert}
-                    {#if msg.repliesTo.kind === "rehydrated_reply_context"}
-                        <RepliesTo
-                            messageId={msg.messageId}
-                            {readonly}
-                            {chatId}
-                            on:goToMessageIndex
-                            repliesTo={msg.repliesTo} />
-                    {:else}
-                        <UnresolvedReply />
                     {/if}
-                {/if}
+                    {#if msg.forwarded}
+                        <div class="forwarded">
+                            <div>
+                                <ForwardIcon
+                                    size={$iconSize}
+                                    color={me
+                                        ? "var(--currentChat-msg-me-muted)"
+                                        : "var(--currentChat-msg-muted)"} />
+                            </div>
+                            <div class="text">{"Forwarded"}</div>
+                        </div>
+                    {/if}
+                    {#if msg.repliesTo !== undefined && !inert}
+                        {#if msg.repliesTo.kind === "rehydrated_reply_context"}
+                            <RepliesTo
+                                messageId={msg.messageId}
+                                {readonly}
+                                {chatId}
+                                {intersecting}
+                                on:goToMessageIndex
+                                repliesTo={msg.repliesTo} />
+                        {:else}
+                            <UnresolvedReply />
+                        {/if}
+                    {/if}
 
-                <ChatMessageContent
-                    senderId={msg.sender}
-                    {readonly}
-                    {fill}
-                    {me}
-                    {chatId}
-                    {collapsed}
-                    {undeleting}
-                    messageIndex={msg.messageIndex}
-                    messageId={msg.messageId}
-                    myUserId={user.userId}
-                    content={msg.content}
-                    edited={msg.edited}
-                    height={mediaCalculatedHeight}
-                    on:registerVote={registerVote}
-                    on:goToMessageIndex
-                    on:upgrade
-                    on:expandMessage />
-
-                {#if !inert && !isPrize}
-                    <TimeAndTicks
-                        {pinned}
+                    <ChatMessageContent
+                        senderId={msg.sender}
+                        {readonly}
                         {fill}
-                        {timestamp}
-                        {expiresAt}
-                        {percentageExpired}
                         {me}
-                        {confirmed}
-                        {failed}
-                        deleted={msg.deleted}
+                        {chatId}
+                        {collapsed}
                         {undeleting}
-                        {readByThem}
-                        {crypto}
-                        {chatType}
-                        {dateFormatter} />
-                {/if}
+                        {intersecting}
+                        messageIndex={msg.messageIndex}
+                        messageId={msg.messageId}
+                        myUserId={user.userId}
+                        content={msg.content}
+                        edited={msg.edited}
+                        height={mediaCalculatedHeight}
+                        on:registerVote={registerVote}
+                        on:goToMessageIndex
+                        on:upgrade
+                        on:expandMessage />
+
+                    {#if !inert && !isPrize}
+                        <TimeAndTicks
+                            {pinned}
+                            {fill}
+                            {timestamp}
+                            {expiresAt}
+                            {percentageExpired}
+                            {me}
+                            {confirmed}
+                            {failed}
+                            deleted={msg.deleted}
+                            {undeleting}
+                            {readByThem}
+                            {crypto}
+                            {chatType}
+                            {dateFormatter} />
+                    {/if}
 
-                {#if debug}
-                    <pre>EventIdx: {eventIndex}</pre>
-                    <pre>MsgIdx: {msg.messageIndex}</pre>
-                    <pre>MsgId: {msg.messageId}</pre>
-                    <pre>Confirmed: {confirmed}</pre>
-                    <pre>ReadByThem: {readByThem}</pre>
-                    <pre>ReadByUs: {readByMe}</pre>
-                    <pre>Pinned: {pinned}</pre>
-                    <pre>edited: {msg.edited}</pre>
-                    <pre>failed: {failed}</pre>
-                    <pre>timestamp: {timestamp}</pre>
-                    <pre>expiresAt: {expiresAt}</pre>
-                    <pre>thread: {JSON.stringify(msg.thread, null, 4)}</pre>
-                {/if}
+                    {#if debug}
+                        <pre>EventIdx: {eventIndex}</pre>
+                        <pre>MsgIdx: {msg.messageIndex}</pre>
+                        <pre>MsgId: {msg.messageId}</pre>
+                        <pre>Confirmed: {confirmed}</pre>
+                        <pre>ReadByThem: {readByThem}</pre>
+                        <pre>ReadByUs: {readByMe}</pre>
+                        <pre>Pinned: {pinned}</pre>
+                        <pre>edited: {msg.edited}</pre>
+                        <pre>failed: {failed}</pre>
+                        <pre>timestamp: {timestamp}</pre>
+                        <pre>expiresAt: {expiresAt}</pre>
+                        <pre>thread: {JSON.stringify(msg.thread, null, 4)}</pre>
+                    {/if}
 
-                {#if showChatMenu}
-                    <ChatMessageMenu
-                        bind:this={messageMenu}
-                        {chatId}
-                        {isProposal}
-                        {inert}
-                        {publicGroup}
-                        {confirmed}
-                        {failed}
-                        canShare={canShare()}
-                        {me}
-                        {canPin}
-                        {canTip}
-                        {pinned}
-                        {supportsReply}
-                        {canQuoteReply}
-                        {threadRootMessage}
-                        {canStartThread}
-                        {multiUserChat}
-                        {msg}
-                        canForward={client.canForward(msg.content)}
-                        {canBlockUser}
-                        {canEdit}
-                        {canDelete}
-                        {canUndelete}
-                        {canRevealDeleted}
-                        {canRevealBlocked}
-                        {crypto}
-                        translatable={(client.getMessageText(msg.content) ?? "").length > 0}
-                        {translated}
-                        on:collapseMessage
-                        on:forward
-                        on:reply={reply}
-                        on:retrySend
-                        on:upgrade
-                        on:initiateThread
-                        on:deleteFailedMessage
-                        on:replyPrivately={replyPrivately}
-                        on:editMessage={editMessage}
-                        on:tipMessage={tipMessage}
-                        on:reportMessage={() => (showReport = true)}
-                        on:cancelReminder={cancelReminder}
-                        on:remindMe={() => (showRemindMe = true)} />
+                    {#if showChatMenu && intersecting}
+                        <ChatMessageMenu
+                            bind:this={messageMenu}
+                            {chatId}
+                            {isProposal}
+                            {inert}
+                            {publicGroup}
+                            {confirmed}
+                            {failed}
+                            {canShare}
+                            {me}
+                            {canPin}
+                            {canTip}
+                            {pinned}
+                            {supportsReply}
+                            {canQuoteReply}
+                            {threadRootMessage}
+                            {canStartThread}
+                            {multiUserChat}
+                            {msg}
+                            {canForward}
+                            {canBlockUser}
+                            {canEdit}
+                            {canDelete}
+                            {canUndelete}
+                            {canRevealDeleted}
+                            {canRevealBlocked}
+                            {crypto}
+                            translatable={canTranslate}
+                            {translated}
+                            on:collapseMessage
+                            on:forward
+                            on:reply={reply}
+                            on:retrySend
+                            on:upgrade
+                            on:initiateThread
+                            on:deleteFailedMessage
+                            on:replyPrivately={replyPrivately}
+                            on:editMessage={editMessage}
+                            on:tipMessage={tipMessage}
+                            on:reportMessage={reportMessage}
+                            on:cancelReminder={cancelReminder}
+                            on:remindMe={remindMe} />
+                    {/if}
+                </div>
+
+                {#if !collapsed && !msg.deleted && canReact && !failed}
+                    <div class="actions">
+                        <div class="reaction" on:click={() => (showEmojiPicker = true)}>
+                            <HoverIcon>
+                                <EmoticonLolOutline size={$iconSize} color={"var(--icon-txt)"} />
+                            </HoverIcon>
+                        </div>
+                    </div>
                 {/if}
             </div>
 
-            {#if !collapsed && !msg.deleted && canReact && !failed}
-                <div class="actions">
-                    <div class="reaction" on:click={() => (showEmojiPicker = true)}>
-                        <HoverIcon>
-                            <EmoticonLolOutline size={$iconSize} color={"var(--icon-txt)"} />
-                        </HoverIcon>
-                    </div>
+            {#if threadSummary !== undefined && !inThread}
+                <ThreadSummary
+                    {chatId}
+                    threadRootMessageIndex={msg.messageIndex}
+                    selected={($pathParams.kind === "global_chat_selected_route" ||
+                        $pathParams.kind === "selected_channel_route") &&
+                        msg.messageIndex === $pathParams.messageIndex &&
+                        $pathParams.open}
+                    {threadSummary}
+                    indent={showAvatar}
+                    {me}
+                    url={msgUrl} />
+            {/if}
+
+            {#if msg.reactions.length > 0 && !inert}
+                <div class="message-reactions" class:me class:indent={showAvatar}>
+                    {#each msg.reactions as { reaction, userIds } (reaction)}
+                        <MessageReaction
+                            on:click={() => toggleReaction(reaction)}
+                            {reaction}
+                            {userIds}
+                            myUserId={user?.userId} />
+                    {/each}
                 </div>
             {/if}
-        </div>
-
-        {#if threadSummary !== undefined && !inThread}
-            <ThreadSummary
-                {chatId}
-                threadRootMessageIndex={msg.messageIndex}
-                selected={($pathParams.kind === "global_chat_selected_route" ||
-                    $pathParams.kind === "selected_channel_route") &&
-                    msg.messageIndex === $pathParams.messageIndex &&
-                    $pathParams.open}
-                {threadSummary}
-                indent={showAvatar}
-                {me}
-                url={msgUrl} />
-        {/if}
-
-        {#if msg.reactions.length > 0 && !inert}
-            <div class="message-reactions" class:me class:indent={showAvatar}>
-                {#each msg.reactions as { reaction, userIds } (reaction)}
-                    <MessageReaction
-                        on:click={() => toggleReaction(reaction)}
-                        {reaction}
-                        {userIds}
-                        myUserId={user?.userId} />
-                {/each}
-            </div>
-        {/if}
 
-        {#if tips.length > 0 && !inert}
-            <div class="tips" class:indent={showAvatar}>
-                {#each tips as [ledger, userTips]}
-                    <TipThumbnail on:click={tipMessage} {canTip} {ledger} {userTips} />
-                {/each}
-            </div>
-        {/if}
+            {#if tips.length > 0 && !inert}
+                <div class="tips" class:indent={showAvatar}>
+                    {#each tips as [ledger, userTips]}
+                        <TipThumbnail on:click={tipMessage} {canTip} {ledger} {userTips} />
+                    {/each}
+                </div>
+            {/if}
+        </IntersectionObserverComponent>
     </div>
 {/if}
 
diff --git a/frontend/app/src/components/home/ChatMessageContent.svelte b/frontend/app/src/components/home/ChatMessageContent.svelte
index b9a9f5525d..5ed5522bac 100644
--- a/frontend/app/src/components/home/ChatMessageContent.svelte
+++ b/frontend/app/src/components/home/ChatMessageContent.svelte
@@ -19,7 +19,6 @@
     import MessageReminderContent from "./MessageReminderContent.svelte";
     import MessageReminderCreatedContent from "./MessageReminderCreatedContent.svelte";
     import ProposalContent from "./proposals/ProposalContent.svelte";
-    import IntersectionObserver from "./IntersectionObserver.svelte";
     import type { ChatIdentifier, MessageContent } from "openchat-client";
     import { _ } from "svelte-i18n";
     import PrizeContentInitial from "./PrizeContentInitial.svelte";
@@ -40,14 +39,13 @@
     export let messageIndex: number;
     export let collapsed = false;
     export let undeleting: boolean = false;
+    export let intersecting: boolean;
 </script>
 
 {#if content.kind === "text_content"}
     <TextContent {me} {fill} {truncate} {pinned} {content} {edited} />
 {:else if content.kind === "image_content"}
-    <IntersectionObserver let:intersecting>
-        <ImageContent {edited} {intersecting} {fill} {content} {reply} {pinned} {height} />
-    </IntersectionObserver>
+    <ImageContent {edited} {intersecting} {fill} {content} {reply} {pinned} {height} />
 {:else if content.kind === "video_content"}
     <VideoContent {edited} {fill} {content} {reply} {height} />
 {:else if content.kind === "audio_content"}
@@ -71,9 +69,7 @@
 {:else if content.kind === "poll_content"}
     <PollContent {readonly} {me} {content} {myUserId} {senderId} on:registerVote />
 {:else if content.kind === "giphy_content"}
-    <IntersectionObserver let:intersecting>
-        <GiphyContent {edited} {intersecting} {fill} {content} {reply} {height} />
-    </IntersectionObserver>
+    <GiphyContent {edited} {intersecting} {fill} {content} {reply} {height} />
 {:else if content.kind === "proposal_content"}
     <ProposalContent
         {content}
@@ -91,9 +87,7 @@
 {:else if content.kind === "reported_message_content"}
     <ReportedMessageContent {content} />
 {:else if content.kind === "meme_fighter_content"}
-    <IntersectionObserver let:intersecting>
-        <ImageContent {edited} {intersecting} {fill} {content} {reply} {pinned} {height} />
-    </IntersectionObserver>
+    <ImageContent {edited} {intersecting} {fill} {content} {reply} {pinned} {height} />
 {:else if content.kind === "user_referral_card"}
     <UserReferralCardContent />
 {/if}
diff --git a/frontend/app/src/components/home/ChatMessageMenu.svelte b/frontend/app/src/components/home/ChatMessageMenu.svelte
index d3de9b96e8..d17d1ebe19 100644
--- a/frontend/app/src/components/home/ChatMessageMenu.svelte
+++ b/frontend/app/src/components/home/ChatMessageMenu.svelte
@@ -131,7 +131,7 @@
             $user.userId,
             msg.sender === $user.userId,
             msg,
-            $cryptoLookup
+            $cryptoLookup,
         );
     }
 
diff --git a/frontend/app/src/components/home/RepliesTo.svelte b/frontend/app/src/components/home/RepliesTo.svelte
index 0434e91c08..05a97011d7 100644
--- a/frontend/app/src/components/home/RepliesTo.svelte
+++ b/frontend/app/src/components/home/RepliesTo.svelte
@@ -22,6 +22,7 @@
     export let chatId: ChatIdentifier;
     export let repliesTo: RehydratedReplyContext;
     export let readonly: boolean;
+    export let intersecting: boolean;
 
     let debug = false;
 
@@ -71,6 +72,7 @@
                 {me}
                 {readonly}
                 {chatId}
+                {intersecting}
                 messageId={repliesTo.messageId}
                 messageIndex={repliesTo.messageIndex}
                 senderId={repliesTo.senderId}
diff --git a/frontend/app/src/components/home/ReplyingTo.svelte b/frontend/app/src/components/home/ReplyingTo.svelte
index 58d0a86eb6..2c866cd0e8 100644
--- a/frontend/app/src/components/home/ReplyingTo.svelte
+++ b/frontend/app/src/components/home/ReplyingTo.svelte
@@ -51,6 +51,7 @@
         {chatId}
         fill={false}
         {me}
+        intersecting={true}
         messageId={replyingTo.messageId}
         messageIndex={replyingTo.messageIndex}
         senderId={replyingTo.senderId}
diff --git a/frontend/app/src/components/home/pinned/PinnedMessage.svelte b/frontend/app/src/components/home/pinned/PinnedMessage.svelte
index 4b67f3bf25..6956460b47 100644
--- a/frontend/app/src/components/home/pinned/PinnedMessage.svelte
+++ b/frontend/app/src/components/home/pinned/PinnedMessage.svelte
@@ -12,6 +12,7 @@
     import { mobileWidth } from "../../../stores/screenDimensions";
     import { createEventDispatcher, getContext } from "svelte";
     import type { ProfileLinkClickedEvent } from "../../web-components/profileLink";
+    import IntersectionObserver from "../IntersectionObserver.svelte";
 
     const client = getContext<OpenChat>("client");
     const dispatch = createEventDispatcher();
@@ -37,7 +38,7 @@
             new CustomEvent<ProfileLinkClickedEvent>("profile-clicked", {
                 detail: { userId: sender.userId, chatButton: !me, inGlobalContext: false },
                 bubbles: true,
-            })
+            }),
         );
     }
 
@@ -56,41 +57,49 @@
             userId={sender.userId}
             size={$mobileWidth ? AvatarSize.Small : AvatarSize.Default} />
     </div>
-    <div
-        class="message-bubble"
-        class:fill={fill && !deleted}
-        class:me
-        class:deleted
-        class:crypto
-        class:rtl={$rtlStore}>
-        {#if !deleted}
-            <div class="sender" class:fill class:rtl={$rtlStore}>
-                <Link underline={"never"} on:click={openUserProfile}>
-                    <h4 class="username" class:fill class:crypto>{username}</h4>
-                </Link>
-            </div>
-        {/if}
-        {#if msg.repliesTo !== undefined && !deleted}
-            {#if msg.repliesTo.kind === "rehydrated_reply_context"}
-                <RepliesTo messageId={msg.messageId} readonly {chatId} repliesTo={msg.repliesTo} />
-            {:else}
-                <UnresolvedReply />
+    <IntersectionObserver let:intersecting>
+        <div
+            class="message-bubble"
+            class:fill={fill && !deleted}
+            class:me
+            class:deleted
+            class:crypto
+            class:rtl={$rtlStore}>
+            {#if !deleted}
+                <div class="sender" class:fill class:rtl={$rtlStore}>
+                    <Link underline={"never"} on:click={openUserProfile}>
+                        <h4 class="username" class:fill class:crypto>{username}</h4>
+                    </Link>
+                </div>
             {/if}
-        {/if}
-
-        <ChatMessageContent
-            readonly
-            pinned
-            {senderId}
-            {fill}
-            {chatId}
-            edited={msg.edited}
-            messageIndex={msg.messageIndex}
-            messageId={msg.messageId}
-            {me}
-            myUserId={user.userId}
-            content={msg.content} />
-    </div>
+            {#if msg.repliesTo !== undefined && !deleted}
+                {#if msg.repliesTo.kind === "rehydrated_reply_context"}
+                    <RepliesTo
+                        {intersecting}
+                        messageId={msg.messageId}
+                        readonly
+                        {chatId}
+                        repliesTo={msg.repliesTo} />
+                {:else}
+                    <UnresolvedReply />
+                {/if}
+            {/if}
+
+            <ChatMessageContent
+                readonly
+                pinned
+                {senderId}
+                {fill}
+                {chatId}
+                edited={msg.edited}
+                messageIndex={msg.messageIndex}
+                messageId={msg.messageId}
+                {me}
+                {intersecting}
+                myUserId={user.userId}
+                content={msg.content} />
+        </div>
+    </IntersectionObserver>
 </div>
 
 <style lang="scss">
@@ -143,8 +152,11 @@
     .message-bubble {
         $radius: $sp3;
         $inner-radius: 4px;
-        transition: box-shadow ease-in-out 200ms, background-color ease-in-out 200ms,
-            border ease-in-out 300ms, transform ease-in-out 200ms;
+        transition:
+            box-shadow ease-in-out 200ms,
+            background-color ease-in-out 200ms,
+            border ease-in-out 300ms,
+            transform ease-in-out 200ms;
         position: relative;
         padding: 6px $sp3 6px $sp3;
         background-color: var(--currentChat-msg-bg);
diff --git a/frontend/openchat-client/src/openchat.ts b/frontend/openchat-client/src/openchat.ts
index 68de8d94d5..f049b8beea 100644
--- a/frontend/openchat-client/src/openchat.ts
+++ b/frontend/openchat-client/src/openchat.ts
@@ -782,6 +782,14 @@ export class OpenChat extends OpenChatAgentWorker {
         );
     }
 
+    pauseEventLoop() {
+        this._chatsPoller?.stop();
+    }
+
+    resumeEventLoop() {
+        this.startChatsPoller();
+    }
+
     private startChatsPoller() {
         this._chatsPoller?.stop();
         this._chatsPoller = new Poller(