From e97eb9144c5bf46fd27bf4f7640adb7f2109364b Mon Sep 17 00:00:00 2001
From: Shusui MOYATANI <syusui.s@gmail.com>
Date: Sat, 16 Dec 2023 10:45:57 +0900
Subject: [PATCH] feat: lazy load

---
 src/components/event/TextNote.tsx             | 402 +++++++++---------
 .../event/textNote/ImageDisplay.tsx           |  27 +-
 .../event/textNote/MentionedEventDisplay.tsx  |  17 +-
 .../event/textNote/PreviewedLink.tsx          | 113 +++--
 .../event/textNote/VideoDisplay.tsx           |  27 +-
 src/components/modal/UserList.tsx             |  10 +-
 src/components/utils/LazyLoad.tsx             |  47 ++
 7 files changed, 377 insertions(+), 266 deletions(-)
 create mode 100644 src/components/utils/LazyLoad.tsx

diff --git a/src/components/event/TextNote.tsx b/src/components/event/TextNote.tsx
index fb09fcd..b27a873 100644
--- a/src/components/event/TextNote.tsx
+++ b/src/components/event/TextNote.tsx
@@ -32,6 +32,7 @@ import UserList from '@/components/modal/UserList';
 import NotePostForm from '@/components/NotePostForm';
 import Post from '@/components/Post';
 import { useTimelineContext } from '@/components/timeline/TimelineContext';
+import LazyLoad from '@/components/utils/LazyLoad';
 import useConfig from '@/core/useConfig';
 import useModalState from '@/hooks/useModalState';
 import { useTranslation } from '@/i18n/useTranslation';
@@ -44,6 +45,11 @@ import useReposts from '@/nostr/useReposts';
 import ensureNonNull from '@/utils/ensureNonNull';
 import timeout from '@/utils/timeout';
 
+export type ActionProps = {
+  event: NostrEvent;
+  onClickReply: () => void;
+};
+
 export type TextNoteProps = {
   event: NostrEvent;
   embedding?: boolean;
@@ -67,25 +73,19 @@ const emojiDataToReactionTypes = (emoji: EmojiData): ReactionTypes => {
   throw new Error('unknown emoji');
 };
 
-const TextNote: Component<TextNoteProps> = (props) => {
+const Actions: Component<ActionProps> = (props) => {
   const i18n = useTranslation();
   const { config } = useConfig();
   const pubkey = usePubkey();
-  const { showProfile } = useModalState();
-  const timelineContext = useTimelineContext();
+  const commands = useCommands();
 
+  const [modal, setModal] = createSignal<'EventDebugModal' | 'Reactions' | 'Reposts' | null>(null);
   const [reacted, setReacted] = createSignal(false);
   const [reposted, setReposted] = createSignal(false);
-  const [showReplyForm, setShowReplyForm] = createSignal(false);
-  const [modal, setModal] = createSignal<'EventDebugModal' | 'Reactions' | 'Reposts' | null>(null);
-
-  const closeReplyForm = () => setShowReplyForm(false);
-  const closeModal = () => setModal(null);
 
   const event = createMemo(() => textNote(props.event));
 
-  const embedding = () => props.embedding ?? true;
-  const actions = () => props.actions ?? true;
+  const closeModal = () => setModal(null);
 
   const {
     reactions,
@@ -107,7 +107,18 @@ const TextNote: Component<TextNoteProps> = (props) => {
     eventId: props.event.id,
   }));
 
-  const commands = useCommands();
+  const isReactedByMe = createMemo(() => {
+    const p = pubkey();
+    return (p != null && isReactedBy(p)) || reacted();
+  });
+  const isReactedByMeWithEmoji = createMemo(() => {
+    const p = pubkey();
+    return p != null && isReactedByWithEmoji(p);
+  });
+  const isRepostedByMe = createMemo(() => {
+    const p = pubkey();
+    return (p != null && isRepostedBy(p)) || reposted();
+  });
 
   const publishReactionMutation = createMutation({
     mutationKey: ['publishReaction', event().id],
@@ -186,82 +197,6 @@ const TextNote: Component<TextNoteProps> = (props) => {
     },
   });
 
-  const menu: MenuItem[] = [
-    {
-      content: () => i18n()('post.copyEventId'),
-      onSelect: () => {
-        navigator.clipboard.writeText(noteEncode(props.event.id)).catch((err) => window.alert(err));
-      },
-    },
-    {
-      content: () => i18n()('post.showJSON'),
-      onSelect: () => {
-        setModal('EventDebugModal');
-      },
-    },
-    {
-      content: () => i18n()('post.showReposts'),
-      onSelect: () => {
-        setModal('Reposts');
-      },
-    },
-    {
-      content: () => i18n()('post.showReactions'),
-      onSelect: () => {
-        setModal('Reactions');
-      },
-    },
-    {
-      when: () => event().pubkey === pubkey(),
-      content: () => <span class="text-red-500">{i18n()('post.deletePost')}</span>,
-      onSelect: () => {
-        const p = pubkey();
-        if (p == null) return;
-
-        if (!window.confirm(i18n()('post.confirmDelete'))) return;
-        deleteMutation.mutate({
-          relayUrls: config().relayUrls,
-          pubkey: p,
-          eventId: event().id,
-        });
-      },
-    },
-  ];
-
-  const isReactedByMe = createMemo(() => {
-    const p = pubkey();
-    return (p != null && isReactedBy(p)) || reacted();
-  });
-  const isReactedByMeWithEmoji = createMemo(() => {
-    const p = pubkey();
-    return p != null && isReactedByWithEmoji(p);
-  });
-  const isRepostedByMe = createMemo(() => {
-    const p = pubkey();
-    return (p != null && isRepostedBy(p)) || reposted();
-  });
-
-  const showReplyEvent = (): string | undefined => {
-    if (embedding()) {
-      const replyingToEvent = event().replyingToEvent();
-
-      if (replyingToEvent != null && !event().containsEventMention(replyingToEvent.id)) {
-        return replyingToEvent.id;
-      }
-
-      const rootEvent = event().rootEvent();
-
-      if (
-        replyingToEvent == null &&
-        rootEvent != null &&
-        !event().containsEventMention(rootEvent.id)
-      ) {
-        return rootEvent.id;
-      }
-    }
-    return undefined;
-  };
-
   const handleRepost: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (ev) => {
     ev.stopPropagation();
 
@@ -308,6 +243,184 @@ const TextNote: Component<TextNoteProps> = (props) => {
     doReaction(emojiDataToReactionTypes(emoji));
   };
 
+  const menu: MenuItem[] = [
+    {
+      content: () => i18n()('post.copyEventId'),
+      onSelect: () => {
+        navigator.clipboard.writeText(noteEncode(props.event.id)).catch((err) => window.alert(err));
+      },
+    },
+    {
+      content: () => i18n()('post.showJSON'),
+      onSelect: () => {
+        setModal('EventDebugModal');
+      },
+    },
+    {
+      content: () => i18n()('post.showReposts'),
+      onSelect: () => {
+        setModal('Reposts');
+      },
+    },
+    {
+      content: () => i18n()('post.showReactions'),
+      onSelect: () => {
+        setModal('Reactions');
+      },
+    },
+    {
+      when: () => event().pubkey === pubkey(),
+      content: () => <span class="text-red-500">{i18n()('post.deletePost')}</span>,
+      onSelect: () => {
+        const p = pubkey();
+        if (p == null) return;
+
+        if (!window.confirm(i18n()('post.confirmDelete'))) return;
+        deleteMutation.mutate({
+          relayUrls: config().relayUrls,
+          pubkey: p,
+          eventId: event().id,
+        });
+      },
+    },
+  ];
+
+  return (
+    <>
+      <Show when={config().showEmojiReaction && reactions().length > 0}>
+        <EmojiReactions reactionsGrouped={reactionsGrouped()} onReaction={doReaction} />
+      </Show>
+      <div class="actions flex w-52 items-center justify-between gap-8 pt-1">
+        <button
+          class="h-4 w-4 shrink-0 text-zinc-400 hover:text-zinc-500"
+          onClick={(ev) => {
+            ev.stopPropagation();
+            props.onClickReply();
+          }}
+        >
+          <ChatBubbleLeft />
+        </button>
+        <div
+          class="flex shrink-0 items-center gap-1"
+          classList={{
+            'text-zinc-400': !isRepostedByMe(),
+            'hover:text-green-400': !isRepostedByMe(),
+            'text-green-400': isRepostedByMe() || publishRepostMutation.isLoading,
+          }}
+        >
+          <button class="h-4 w-4" onClick={handleRepost} disabled={publishRepostMutation.isLoading}>
+            <ArrowPathRoundedSquare />
+          </button>
+          <Show when={!config().hideCount && reposts().length > 0}>
+            <div class="text-sm text-zinc-400">{reposts().length}</div>
+          </Show>
+        </div>
+        <div
+          class="flex shrink-0 items-center gap-1"
+          classList={{
+            'text-zinc-400': !isReactedByMe() || isReactedByMeWithEmoji(),
+            'hover:text-rose-400': !isReactedByMe() || isReactedByMeWithEmoji(),
+            'text-rose-400':
+              (isReactedByMe() && !isReactedByMeWithEmoji()) || publishReactionMutation.isLoading,
+          }}
+        >
+          <button
+            class="h-4 w-4"
+            onClick={handleReaction}
+            disabled={publishReactionMutation.isLoading}
+          >
+            <Show when={isReactedByMe() && !isReactedByMeWithEmoji()} fallback={<HeartOutlined />}>
+              <HeartSolid />
+            </Show>
+          </button>
+          <Show when={!config().hideCount && !config().showEmojiReaction && reactions().length > 0}>
+            <div class="text-sm text-zinc-400">{reactions().length}</div>
+          </Show>
+        </div>
+        <Show when={config().useEmojiReaction}>
+          <div
+            class="flex shrink-0 items-center gap-1"
+            classList={{
+              'text-zinc-400': !isReactedByMe() || !isReactedByMeWithEmoji(),
+              'hover:text-rose-400': !isReactedByMe() || !isReactedByMeWithEmoji(),
+              'text-rose-400':
+                (isReactedByMe() && isReactedByMeWithEmoji()) || publishReactionMutation.isLoading,
+            }}
+          >
+            <EmojiPicker onEmojiSelect={handleEmojiSelect}>
+              <span class="inline-block h-4 w-4">
+                <Plus />
+              </span>
+            </EmojiPicker>
+          </div>
+        </Show>
+        <div>
+          <ContextMenu menu={menu}>
+            <span class="inline-block h-4 w-4 text-zinc-400 hover:text-zinc-500">
+              <EllipsisHorizontal />
+            </span>
+          </ContextMenu>
+        </div>
+      </div>
+      <Switch>
+        <Match when={modal() === 'EventDebugModal'}>
+          <EventDebugModal event={props.event} onClose={closeModal} />
+        </Match>
+        <Match when={modal() === 'Reactions'}>
+          <UserList
+            data={reactions()}
+            pubkeyExtractor={(ev) => ev.pubkey}
+            renderInfo={(ev) => (
+              <div class="w-6">
+                <EmojiDisplay reactionTypes={reaction(ev).toReactionTypes()} />
+              </div>
+            )}
+            onClose={closeModal}
+          />
+        </Match>
+        <Match when={modal() === 'Reposts'}>
+          <UserList data={reposts()} pubkeyExtractor={(ev) => ev.pubkey} onClose={closeModal} />
+        </Match>
+      </Switch>
+    </>
+  );
+};
+
+const TextNote: Component<TextNoteProps> = (props) => {
+  const i18n = useTranslation();
+  const { showProfile } = useModalState();
+  const timelineContext = useTimelineContext();
+
+  const [showReplyForm, setShowReplyForm] = createSignal(false);
+  const closeReplyForm = () => setShowReplyForm(false);
+  const toggleReplyForm = () => setShowReplyForm((current) => !current);
+
+  const event = createMemo(() => textNote(props.event));
+
+  const embedding = () => props.embedding ?? true;
+  const actions = () => props.actions ?? true;
+
+  const showReplyEvent = (): string | undefined => {
+    if (embedding()) {
+      const replyingToEvent = event().replyingToEvent();
+
+      if (replyingToEvent != null && !event().containsEventMention(replyingToEvent.id)) {
+        return replyingToEvent.id;
+      }
+
+      const rootEvent = event().rootEvent();
+
+      if (
+        replyingToEvent == null &&
+        rootEvent != null &&
+        !event().containsEventMention(rootEvent.id)
+      ) {
+        return rootEvent.id;
+      }
+    }
+    return undefined;
+  };
+
   return (
     <div class="nostr-textnote">
       <Post
@@ -318,7 +431,9 @@ const TextNote: Component<TextNoteProps> = (props) => {
             <Show when={showReplyEvent()} keyed>
               {(id) => (
                 <div class="mt-1 rounded border p-1">
-                  <EventDisplayById eventId={id} actions={false} embedding={false} />
+                  <LazyLoad fallback={<div class="h-12" />}>
+                    {() => <EventDisplayById eventId={id} actions={false} embedding={false} />}
+                  </LazyLoad>
                 </div>
               )}
             </Show>
@@ -354,94 +469,9 @@ const TextNote: Component<TextNoteProps> = (props) => {
         }
         actions={
           <Show when={actions()}>
-            <Show when={config().showEmojiReaction && reactions().length > 0}>
-              <EmojiReactions reactionsGrouped={reactionsGrouped()} onReaction={doReaction} />
-            </Show>
-            <div class="actions flex w-52 items-center justify-between gap-8 pt-1">
-              <button
-                class="h-4 w-4 shrink-0 text-zinc-400 hover:text-zinc-500"
-                onClick={(ev) => {
-                  ev.stopPropagation();
-                  setShowReplyForm((current) => !current);
-                }}
-              >
-                <ChatBubbleLeft />
-              </button>
-              <div
-                class="flex shrink-0 items-center gap-1"
-                classList={{
-                  'text-zinc-400': !isRepostedByMe(),
-                  'hover:text-green-400': !isRepostedByMe(),
-                  'text-green-400': isRepostedByMe() || publishRepostMutation.isLoading,
-                }}
-              >
-                <button
-                  class="h-4 w-4"
-                  onClick={handleRepost}
-                  disabled={publishRepostMutation.isLoading}
-                >
-                  <ArrowPathRoundedSquare />
-                </button>
-                <Show when={!config().hideCount && reposts().length > 0}>
-                  <div class="text-sm text-zinc-400">{reposts().length}</div>
-                </Show>
-              </div>
-              <div
-                class="flex shrink-0 items-center gap-1"
-                classList={{
-                  'text-zinc-400': !isReactedByMe() || isReactedByMeWithEmoji(),
-                  'hover:text-rose-400': !isReactedByMe() || isReactedByMeWithEmoji(),
-                  'text-rose-400':
-                    (isReactedByMe() && !isReactedByMeWithEmoji()) ||
-                    publishReactionMutation.isLoading,
-                }}
-              >
-                <button
-                  class="h-4 w-4"
-                  onClick={handleReaction}
-                  disabled={publishReactionMutation.isLoading}
-                >
-                  <Show
-                    when={isReactedByMe() && !isReactedByMeWithEmoji()}
-                    fallback={<HeartOutlined />}
-                  >
-                    <HeartSolid />
-                  </Show>
-                </button>
-                <Show
-                  when={
-                    !config().hideCount && !config().showEmojiReaction && reactions().length > 0
-                  }
-                >
-                  <div class="text-sm text-zinc-400">{reactions().length}</div>
-                </Show>
-              </div>
-              <Show when={config().useEmojiReaction}>
-                <div
-                  class="flex shrink-0 items-center gap-1"
-                  classList={{
-                    'text-zinc-400': !isReactedByMe() || !isReactedByMeWithEmoji(),
-                    'hover:text-rose-400': !isReactedByMe() || !isReactedByMeWithEmoji(),
-                    'text-rose-400':
-                      (isReactedByMe() && isReactedByMeWithEmoji()) ||
-                      publishReactionMutation.isLoading,
-                  }}
-                >
-                  <EmojiPicker onEmojiSelect={handleEmojiSelect}>
-                    <span class="inline-block h-4 w-4">
-                      <Plus />
-                    </span>
-                  </EmojiPicker>
-                </div>
-              </Show>
-              <div>
-                <ContextMenu menu={menu}>
-                  <span class="inline-block h-4 w-4 text-zinc-400 hover:text-zinc-500">
-                    <EllipsisHorizontal />
-                  </span>
-                </ContextMenu>
-              </div>
-            </div>
+            <LazyLoad fallback={<div class="h-5" />}>
+              {() => <Actions event={props.event} onClickReply={toggleReplyForm} />}
+            </LazyLoad>
           </Show>
         }
         footer={
@@ -461,26 +491,6 @@ const TextNote: Component<TextNoteProps> = (props) => {
           timelineContext?.setTimeline({ type: 'Replies', event: props.event });
         }}
       />
-      <Switch>
-        <Match when={modal() === 'EventDebugModal'}>
-          <EventDebugModal event={props.event} onClose={closeModal} />
-        </Match>
-        <Match when={modal() === 'Reactions'}>
-          <UserList
-            data={reactions()}
-            pubkeyExtractor={(ev) => ev.pubkey}
-            renderInfo={(ev) => (
-              <div class="w-6">
-                <EmojiDisplay reactionTypes={reaction(ev).toReactionTypes()} />
-              </div>
-            )}
-            onClose={closeModal}
-          />
-        </Match>
-        <Match when={modal() === 'Reposts'}>
-          <UserList data={reposts()} pubkeyExtractor={(ev) => ev.pubkey} onClose={closeModal} />
-        </Match>
-      </Switch>
     </div>
   );
 };
diff --git a/src/components/event/textNote/ImageDisplay.tsx b/src/components/event/textNote/ImageDisplay.tsx
index 44257ac..2783c2c 100644
--- a/src/components/event/textNote/ImageDisplay.tsx
+++ b/src/components/event/textNote/ImageDisplay.tsx
@@ -1,5 +1,6 @@
 import { Component, createSignal, Show } from 'solid-js';
 
+import LazyLoad from '@/components/utils/LazyLoad';
 import SafeLink from '@/components/utils/SafeLink';
 import { useTranslation } from '@/i18n/useTranslation';
 import { thumbnailUrl } from '@/utils/url';
@@ -26,14 +27,24 @@ const ImageDisplay: Component<ImageDisplayProps> = (props) => {
         </button>
       }
     >
-      <SafeLink class="my-2 block" href={props.url}>
-        <img
-          ref={imageRef}
-          class="max-h-64 max-w-full rounded object-contain shadow hover:shadow-md"
-          src={thumbnailUrl(props.url)}
-          alt={props.url}
-        />
-      </SafeLink>
+      <LazyLoad
+        fallback={
+          <div class="aspect-video max-w-full">
+            <SafeLink href={props.url} />
+          </div>
+        }
+      >
+        {() => (
+          <SafeLink class="my-2 block" href={props.url}>
+            <img
+              ref={imageRef}
+              class="max-h-64 max-w-full rounded object-contain shadow hover:shadow-md"
+              src={thumbnailUrl(props.url)}
+              alt={props.url}
+            />
+          </SafeLink>
+        )}
+      </LazyLoad>
     </Show>
   );
 };
diff --git a/src/components/event/textNote/MentionedEventDisplay.tsx b/src/components/event/textNote/MentionedEventDisplay.tsx
index 9a833db..10840cf 100644
--- a/src/components/event/textNote/MentionedEventDisplay.tsx
+++ b/src/components/event/textNote/MentionedEventDisplay.tsx
@@ -5,6 +5,7 @@ import { Kind } from 'nostr-tools';
 // eslint-disable-next-line import/no-cycle
 import EventDisplayById from '@/components/event/EventDisplayById';
 import EventLink from '@/components/EventLink';
+import LazyLoad from '@/components/utils/LazyLoad';
 import { type MentionedEvent } from '@/nostr/parseTextNote';
 
 export type MentionedEventDisplayProps = {
@@ -17,12 +18,16 @@ const MentionedEventDisplay = (props: MentionedEventDisplayProps) => (
     fallback={<EventLink eventId={props.mentionedEvent.eventId} />}
   >
     <div class="my-1 rounded border p-1">
-      <EventDisplayById
-        eventId={props.mentionedEvent.eventId}
-        embedding={false}
-        actions={false}
-        ensureKinds={[Kind.Text]}
-      />
+      <LazyLoad>
+        {() => (
+          <EventDisplayById
+            eventId={props.mentionedEvent.eventId}
+            embedding={false}
+            actions={false}
+            ensureKinds={[Kind.Text]}
+          />
+        )}
+      </LazyLoad>
     </div>
   </Show>
 );
diff --git a/src/components/event/textNote/PreviewedLink.tsx b/src/components/event/textNote/PreviewedLink.tsx
index 9b835dc..28c7575 100644
--- a/src/components/event/textNote/PreviewedLink.tsx
+++ b/src/components/event/textNote/PreviewedLink.tsx
@@ -1,5 +1,6 @@
-import { Component, JSX, Switch, Match, createEffect } from 'solid-js';
+import { Component, JSX, Switch, Match, createEffect, Show } from 'solid-js';
 
+import LazyLoad from '@/components/utils/LazyLoad';
 import SafeLink from '@/components/utils/SafeLink';
 import useConfig from '@/core/useConfig';
 import { useOgp } from '@/utils/ogp';
@@ -28,65 +29,89 @@ const youtubeUrl = (videoId: string): string => {
   return iframeUrl.href;
 };
 
-const PreviewedLink: Component<PreviewdLinkProps> = (props) => {
+const TwitterEmbed: Component<{ class?: string; href: string }> = (props) => {
   let twitterRef: HTMLQuoteElement | undefined;
 
-  const { config } = useConfig();
-
-  const { ogp } = useOgp(() => ({
-    url: props.href,
-  }));
-
   createEffect(() => {
     if (isTwitterUrl(props.href)) {
       window.twttr?.widgets?.load(twitterRef);
     }
   });
 
+  return (
+    <blockquote class="twitter-tweet" ref={twitterRef}>
+      <a
+        class={props.class}
+        href={twitterUrl(props.href)}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {twitterUrl(props.href)}
+      </a>
+    </blockquote>
+  );
+};
+
+const OgpEmbed: Component<{ url: string }> = (props) => {
+  const { ogp } = useOgp(() => ({
+    url: props.url,
+  }));
+
+  return (
+    <Show when={ogp()} fallback={<SafeLink href={props.url} />} keyed>
+      {(ogpProps) => (
+        <SafeLink href={props.url}>
+          <div class="my-2 rounded-lg border transition-colors hover:bg-slate-100">
+            <img
+              alt={ogpProps.title}
+              class="max-w-full rounded-t-lg object-contain shadow"
+              src={ogpProps.image}
+            />
+            <div class="mb-1 p-1">
+              <div class="text-xs text-slate-500">{new URL(ogpProps.url).host}</div>
+              <div class="text-sm">{ogpProps.title}</div>
+              <div class="text-xs text-slate-500">{ogpProps.description}</div>
+            </div>
+          </div>
+        </SafeLink>
+      )}
+    </Show>
+  );
+};
+
+const PreviewedLink: Component<PreviewdLinkProps> = (props) => {
+  const { config } = useConfig();
+
   return (
     <Switch fallback={<SafeLink class={props.class} href={props.href} />}>
       <Match when={config().embedding.twitter && isTwitterUrl(props.href)}>
-        <blockquote class="twitter-tweet" ref={twitterRef}>
-          <a
-            class={props.class}
-            href={twitterUrl(props.href)}
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            {twitterUrl(props.href)}
-          </a>
-        </blockquote>
+        <LazyLoad>{() => <TwitterEmbed class={props.class} href={props.href} />}</LazyLoad>
       </Match>
       <Match when={config().embedding.youtube && parseYouTubeVideoUrl(props.href)} keyed>
         {({ videoId }) => (
-          <div class="my-2 aspect-video w-full">
-            <iframe
-              loading="lazy"
-              title="YouTube"
-              class="my-2 h-full w-full"
-              src={youtubeUrl(videoId)}
-              allowfullscreen
-            />
-          </div>
+          <LazyLoad
+            fallback={
+              <div class="aspect-video max-w-full">
+                <SafeLink href={props.href} />
+              </div>
+            }
+          >
+            {() => (
+              <div class="my-2 aspect-video w-full">
+                <iframe
+                  loading="lazy"
+                  title="YouTube"
+                  class="my-2 h-full w-full"
+                  src={youtubeUrl(videoId)}
+                  allowfullscreen
+                />
+              </div>
+            )}
+          </LazyLoad>
         )}
       </Match>
-      <Match when={config().embedding.ogp && ogp()} keyed>
-        {(ogpProps) => (
-          <SafeLink href={props.href}>
-            <div class="my-2 rounded-lg border transition-colors hover:bg-slate-100">
-              <img
-                alt={ogpProps.title}
-                class="max-w-full rounded-t-lg object-contain shadow"
-                src={ogpProps.image}
-              />
-              <div class="mb-1 p-1">
-                <div class="text-xs text-slate-500">{new URL(ogpProps.url).host}</div>
-                <div class="text-sm">{ogpProps.title}</div>
-                <div class="text-xs text-slate-500">{ogpProps.description}</div>
-              </div>
-            </div>
-          </SafeLink>
-        )}
+      <Match when={config().embedding.ogp}>
+        <LazyLoad>{() => <OgpEmbed url={props.href} />}</LazyLoad>
       </Match>
     </Switch>
   );
diff --git a/src/components/event/textNote/VideoDisplay.tsx b/src/components/event/textNote/VideoDisplay.tsx
index 706222c..5aeeb43 100644
--- a/src/components/event/textNote/VideoDisplay.tsx
+++ b/src/components/event/textNote/VideoDisplay.tsx
@@ -1,5 +1,6 @@
 import { Component, createSignal, Show } from 'solid-js';
 
+import LazyLoad from '@/components/utils/LazyLoad';
 import SafeLink from '@/components/utils/SafeLink';
 import { useTranslation } from '@/i18n/useTranslation';
 
@@ -25,17 +26,21 @@ const VideoDisplay: Component<VideoDisplayProps> = (props) => {
         </button>
       }
     >
-      <SafeLink class="my-2 block" href={props.url}>
-        {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-        <video
-          ref={videoRef}
-          class="max-h-64 max-w-full rounded-sm object-contain shadow"
-          src={props.url}
-          controls
-        >
-          <a href={props.url}>{i18n()('post.download')}</a>
-        </video>
-      </SafeLink>
+      <LazyLoad fallback={<div class="aspect-video max-w-full" />}>
+        {() => (
+          <SafeLink class="my-2 block" href={props.url}>
+            {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+            <video
+              ref={videoRef}
+              class="max-h-64 max-w-full rounded-sm object-contain shadow"
+              src={props.url}
+              controls
+            >
+              <a href={props.url}>{i18n()('post.download')}</a>
+            </video>
+          </SafeLink>
+        )}
+      </LazyLoad>
     </Show>
   );
 };
diff --git a/src/components/modal/UserList.tsx b/src/components/modal/UserList.tsx
index e0f68be..b39e0dd 100644
--- a/src/components/modal/UserList.tsx
+++ b/src/components/modal/UserList.tsx
@@ -2,6 +2,7 @@ import { For, JSX, Show } from 'solid-js';
 
 import ProfileListItem from '@/components/event/ProfileListItem';
 import BasicModal from '@/components/modal/BasicModal';
+import LazyLoad from '@/components/utils/LazyLoad';
 import useModalState from '@/hooks/useModalState';
 
 export type UserListProps<T> = {
@@ -27,7 +28,14 @@ const UserList = <T,>(props: UserListProps<T>): JSX.Element => {
                   <Show when={props.renderInfo} keyed>
                     {(render) => render(e)}
                   </Show>
-                  <ProfileListItem pubkey={pubkey()} onShowProfile={() => showProfile(pubkey())} />
+                  <LazyLoad fallback={<div class="h-6" />}>
+                    {() => (
+                      <ProfileListItem
+                        pubkey={pubkey()}
+                        onShowProfile={() => showProfile(pubkey())}
+                      />
+                    )}
+                  </LazyLoad>
                 </div>
               );
             }}
diff --git a/src/components/utils/LazyLoad.tsx b/src/components/utils/LazyLoad.tsx
new file mode 100644
index 0000000..030505e
--- /dev/null
+++ b/src/components/utils/LazyLoad.tsx
@@ -0,0 +1,47 @@
+import { Component, JSX, Show, createSignal, onCleanup, onMount } from 'solid-js';
+
+export type LazyLoadProps = {
+  threshold?: number[] | number;
+  fallback?: JSX.Element;
+  children: () => JSX.Element;
+};
+
+const LazyLoad: Component<LazyLoadProps> = (props) => {
+  let containerRef: HTMLDivElement | undefined;
+
+  const [visible, setVisible] = createSignal<boolean>(false);
+
+  onMount(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setVisible(true);
+          }
+        });
+      },
+      {
+        threshold: props.threshold ?? 0,
+      },
+    );
+    if (containerRef != null) {
+      observer.observe(containerRef);
+    }
+
+    onCleanup(() => {
+      observer.disconnect();
+    });
+  });
+
+  return (
+    <>
+      <div ref={containerRef} />
+      <Show when={visible()} fallback={props.fallback} keyed>
+        {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
+        {(_) => props.children()}
+      </Show>
+    </>
+  );
+};
+
+export default LazyLoad;