don't render the menu unless we are in the viewport (#5045)

open-chat-labs · Dec 19, 2023 · 2e35ca7 · 2e35ca7
1 parent 2914f73
commit 2e35ca7
Show file tree

Hide file tree

Showing 8 changed files with 292 additions and 260 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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(