performance improvements

.changeset/ninety-otters-nail.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+cache url open graph data

.changeset/tasty-buckets-dream.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Performance improvements

src/components/embed-types/nostr.tsx

@@ -32,10 +32,10 @@ export function embedNostrLinks(content: EmbedableContent) {
             return <QuoteNote noteId={pointer.id} relay={pointer.relays?.[0]} />;
           }
           default:
-            return match[0];
+            return null;
         }
       } catch (e) {
-        return match[0];
+        return null;
       }
     },
   });
@@ -58,7 +58,7 @@ export function embedNostrMentions(content: EmbedableContent, event: NostrEvent
         }
       }
 
-      return match[0];
+      return null;
     },
   });
 }
@@ -87,7 +87,7 @@ export function embedNostrHashtags(content: EmbedableContent, event: NostrEvent
         );
       }
 
-      return match[0];
+      return null;
     },
   });
 }

src/components/embeded-content.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { EmbedableContent } from "../helpers/embeds";
 import { Text } from "@chakra-ui/react";
 
@@ -11,7 +10,7 @@ export default function EmbeddedContent({ content }: { content: EmbedableContent
             {part}
           </Text>
         ) : (
-          React.cloneElement(part, { key: "part-" + i })
+          part
         )
       )}
     </>

src/components/layout/index.tsx

@@ -15,7 +15,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <ReloadPrompt mb="2" />
       <Container size="lg" display="flex" padding="0" gap="4" alignItems="flex-start">
         {!isMobile && <DesktopSideNav position="sticky" top="0" />}
-        <Flex flexGrow={1} direction="column" w="full" overflowX="hidden" pb={isMobile ? "14" : 0}>
+        <Flex flexGrow={1} direction="column" w="full" overflowX="hidden" overflowY="visible" pb={isMobile ? "14" : 0}>
           <ErrorBoundary>{children}</ErrorBoundary>
         </Flex>
         {isMobile && (

src/components/note/embedded-note.tsx

@@ -1,5 +1,5 @@
 import dayjs from "dayjs";
-import { Card, CardBody, CardHeader, Flex, Heading } from "@chakra-ui/react";
+import { Button, Card, CardBody, CardHeader, Spacer, useDisclosure } from "@chakra-ui/react";
 
 import { NoteContents } from "./note-contents";
 import { NostrEvent } from "../../types/nostr-event";
@@ -11,31 +11,29 @@ import appSettings from "../../services/app-settings";
 import EventVerificationIcon from "../event-verification-icon";
 import { TrustProvider } from "../../providers/trust";
 import { NoteLink } from "../note-link";
+import { ArrowDownSIcon, ArrowUpSIcon } from "../icons";
 
 export default function EmbeddedNote({ note }: { note: NostrEvent }) {
   const { showSignatureVerification } = useSubject(appSettings);
+  const expand = useDisclosure();
 
   return (
     <TrustProvider event={note}>
       <Card variant="outline">
-        <CardHeader padding="2">
-          <Flex flex="1" gap="2" alignItems="center" wrap="wrap">
-            <UserAvatarLink pubkey={note.pubkey} size="xs" />
-
-            <Heading size="sm" display="inline">
-              <UserLink pubkey={note.pubkey} />
-            </Heading>
-            <UserDnsIdentityIcon pubkey={note.pubkey} onlyIcon />
-            <Flex grow={1} />
-            {showSignatureVerification && <EventVerificationIcon event={note} />}
-            <NoteLink noteId={note.id} color="current" whiteSpace="nowrap">
-              {dayjs.unix(note.created_at).fromNow()}
-            </NoteLink>
-          </Flex>
+        <CardHeader padding="2" display="flex" gap="2" alignItems="center" flexWrap="wrap">
+          <UserAvatarLink pubkey={note.pubkey} size="sm" />
+          <UserLink pubkey={note.pubkey} fontWeight="bold" isTruncated fontSize="lg" />
+          <UserDnsIdentityIcon pubkey={note.pubkey} onlyIcon />
+          <Button size="sm" onClick={expand.onToggle} leftIcon={expand.isOpen ? <ArrowUpSIcon /> : <ArrowDownSIcon />}>
+            Expand
+          </Button>
+          <Spacer />
+          {showSignatureVerification && <EventVerificationIcon event={note} />}
+          <NoteLink noteId={note.id} color="current" whiteSpace="nowrap">
+            {dayjs.unix(note.created_at).fromNow()}
+          </NoteLink>
         </CardHeader>
-        <CardBody p="0">
-          <NoteContents event={note} maxHeight={200} />
-        </CardBody>
+        <CardBody p="0">{expand.isOpen && <NoteContents event={note} />}</CardBody>
       </Card>
     </TrustProvider>
   );

src/components/note/index.tsx

@@ -59,10 +59,7 @@ export const Note = React.memo(({ event, maxHeight, variant = "outline" }: NoteP
           <CardHeader padding="2">
             <Flex flex="1" gap="2" alignItems="center" wrap="wrap">
               <UserAvatarLink pubkey={event.pubkey} size={isMobile ? "xs" : "sm"} />
-
-              <Heading size="sm" display="inline">
-                <UserLink pubkey={event.pubkey} />
-              </Heading>
+              <UserLink pubkey={event.pubkey} isTruncated fontWeight="bold" fontSize="lg" />
               <UserDnsIdentityIcon pubkey={event.pubkey} onlyIcon />
               <Flex grow={1} />
               {showSignatureVerification && <EventVerificationIcon event={event} />}

src/components/note/note-contents.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from "react";
 import { Box } from "@chakra-ui/react";
 import { DraftNostrEvent, NostrEvent } from "../../types/nostr-event";
-import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 import { useExpand } from "./expanded";
 import { EmbedableContent, embedUrls } from "../../helpers/embeds";
 import {
@@ -53,7 +53,7 @@ function buildContents(event: NostrEvent | DraftNostrEvent) {
   return content;
 }
 
-const GradientOverlay = styled.div`
+const gradientOverlayStyles = css`
   position: absolute;
   left: 0;
   right: 0;
@@ -100,7 +100,7 @@ export const NoteContents = React.memo(({ event, maxHeight }: NoteContentsProps)
         <div ref={ref}>
           <EmbeddedContent content={content} />
         </div>
-        {showOverlay && <GradientOverlay onClick={expand?.onExpand} />}
+        {showOverlay && <Box css={gradientOverlayStyles} onClick={expand?.onExpand} />}
       </Box>
     </ImageGalleryProvider>
   );

src/components/timeline-page/generic-note-timeline/repost-note.tsx

@@ -11,14 +11,16 @@ import { UserDnsIdentityIcon } from "../../user-dns-identity-icon";
 import { UserLink } from "../../user-link";
 import { TrustProvider } from "../../../providers/trust";
 import { safeJson } from "../../../helpers/parse";
-import { verifySignature } from "nostr-tools";
 import { useReadRelayUrls } from "../../../hooks/use-client-relays";
 import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
 
-function parseHardcodedNoteContent(event: NostrEvent): NostrEvent | null {
+function parseHardcodedNoteContent(event: NostrEvent) {
   const json = safeJson(event.content, null);
-  if (json) verifySignature(json);
-  return null;
+
+  // TODO: disabled until signature verification can be done in another thread
+  // if (json && !verifySignature(json)) return null;
+
+  return (json as NostrEvent) ?? null;
 }
 
 export default function RepostNote({ event, maxHeight }: { event: NostrEvent; maxHeight?: number }) {

src/components/timeline-page/index.tsx

@@ -30,7 +30,6 @@ export type TimelineViewType = "timeline" | "images";
 export default function TimelinePage({ timeline, header }: { timeline: TimelineLoader; header?: React.ReactNode }) {
   const isMobile = useIsMobile();
 
-  const scrollBox = useRef<HTMLDivElement | null>(null);
   const callback = useTimelineCurserIntersectionCallback(timeline);
 
   const [params, setParams] = useSearchParams();
@@ -54,8 +53,8 @@ export default function TimelinePage({ timeline, header }: { timeline: TimelineL
     }
   };
   return (
-    <IntersectionObserverProvider<string> root={scrollBox} callback={callback}>
-      <Flex direction="column" gap="2" pt="4" pb="8" h="full" overflowY="auto" overflowX="hidden" ref={scrollBox}>
+    <IntersectionObserverProvider<string> callback={callback}>
+      <Flex direction="column" gap="2" pt="4" pb="8">
         {header}
         {renderTimeline()}
         <TimelineActionAndStatus timeline={timeline} />

src/components/timeline-page/media-timeline/index.tsx

@@ -9,18 +9,11 @@ import { useNavigate } from "react-router-dom";
 import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
 import { getSharableNoteId } from "../../../helpers/nip19";
 import { ExternalLinkIcon } from "../../icons";
-import styled from "@emotion/styled";
 
 const matchAllImages = new RegExp(matchImageUrls, "ig");
 
 type ImagePreview = { eventId: string; src: string; index: number };
 
-const StyledImageGalleryLink = styled(ImageGalleryLink)`
-  &:not(:hover) > button {
-    display: none;
-  }
-`;
-
 const ImagePreview = React.memo(({ image }: { image: ImagePreview }) => {
   const navigate = useNavigate();
 
@@ -28,7 +21,7 @@ const ImagePreview = React.memo(({ image }: { image: ImagePreview }) => {
   useRegisterIntersectionEntity(ref, image.eventId);
 
   return (
-    <StyledImageGalleryLink href={image.src} position="relative" ref={ref}>
+    <ImageGalleryLink href={image.src} position="relative" ref={ref}>
       <Box aspectRatio={1} backgroundImage={`url(${image.src})`} backgroundSize="cover" backgroundPosition="center" />
       <IconButton
         icon={<ExternalLinkIcon />}
@@ -44,7 +37,7 @@ const ImagePreview = React.memo(({ image }: { image: ImagePreview }) => {
           navigate(`/n/${getSharableNoteId(image.eventId)}`);
         }}
       />
-    </StyledImageGalleryLink>
+    </ImageGalleryLink>
   );
 });
 

src/helpers/embeds.ts

@@ -26,15 +26,20 @@ export function embedJSX(content: EmbedableContent, embed: EmbedType): Embedable
           const { start, end } = (embed.getLocation || defaultGetLocation)(match);
           const before = subContent.slice(0, start);
           const after = subContent.slice(end, subContent.length);
-          let embedRender = embed.render(match);
+          let render = embed.render(match);
 
-          if (embedRender === null) return subContent;
+          if (render === null) return subContent;
 
-          if (typeof embedRender !== "string" && !embedRender.props.key) {
-            embedRender = cloneElement(embedRender, { key: embed.name + i });
+          if (typeof render !== "string" && !render.props.key) {
+            render = cloneElement(render, { key: embed.name + i });
           }
 
-          return [...embedJSX([before], embed), embedRender, ...embedJSX([after], embed)];
+          const newContent: EmbedableContent = [];
+          if (before.length > 0) newContent.push(...embedJSX([before], embed));
+          newContent.push(render);
+          if (after.length > 0) newContent.push(...embedJSX([after], embed));
+
+          return newContent;
         }
       }
 

src/helpers/regexp.ts

@@ -3,4 +3,4 @@ export const matchImageUrls =
   /https?:\/\/([\dA-z\.-]+\.[A-z\.]{2,12})((?:\/[\+~%\/\.\w\-_]*)?\.(?:svg|gif|png|jpg|jpeg|webp|avif))(\??(?:[\?#\-\+=&;%@\.\w_]*)#?(?:[\-\.\!\/\\\w]*))?/i;
 
 export const matchNostrLink = /(nostr:|@)?((npub|note|nprofile|nevent)1[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{58,})/i;
-export const matchHashtag = /(^|[^\p{L}])#(\p{L}+)/iu;
+export const matchHashtag = /(^|[^\p{L}])#([\p{L}\p{N}]+)/iu;

src/helpers/zaps.ts

@@ -52,15 +52,17 @@ export type ParsedZap = {
   eventId?: string;
 };
 
-function parseZapEvent(event: NostrEvent): ParsedZap {
+export function parseZapEvent(event: NostrEvent): ParsedZap {
   const zapRequestStr = event.tags.find(([t, v]) => t === "description")?.[1];
   if (!zapRequestStr) throw new Error("no description tag");
 
   const bolt11 = event.tags.find((t) => t[0] === "bolt11")?.[1];
   if (!bolt11) throw new Error("missing bolt11 invoice");
 
-  const error = nip57.validateZapRequest(zapRequestStr);
-  if (error) throw new Error(error);
+  // TODO: disabled until signature verification can be offloaded to a web worker
+
+  // const error = nip57.validateZapRequest(zapRequestStr);
+  // if (error) throw new Error(error);
 
   const request = JSON.parse(zapRequestStr) as NostrEvent;
   const payment = parsePaymentRequest(bolt11);
@@ -75,15 +77,6 @@ function parseZapEvent(event: NostrEvent): ParsedZap {
   };
 }
 
-const zapEventCache = new Map<string, ReturnType<typeof parseZapEvent>>();
-function cachedParseZapEvent(event: NostrEvent) {
-  let result = zapEventCache.get(event.id);
-  if (result) return result;
-  result = parseZapEvent(event);
-  if (result) zapEventCache.set(event.id, result);
-  return result;
-}
-
 export async function requestZapInvoice(zapRequest: NostrEvent, lnurl: string) {
   const amount = zapRequest.tags.find((t) => t[0] === "amount")?.[1];
   if (!amount) throw new Error("missing amount");
@@ -101,5 +94,3 @@ export async function requestZapInvoice(zapRequest: NostrEvent, lnurl: string) {
     return payRequest as string;
   } else throw new Error("Failed to get invoice");
 }
-
-export { cachedParseZapEvent as parseZapEvent };

src/hooks/use-open-graph-data.ts

@@ -1,22 +1,29 @@
 import { useAsync } from "react-use";
 import extractMetaTags from "../lib/open-graph-scraper/extract";
 import { fetchWithCorsFallback } from "../helpers/cors";
+import { OgObjectInteral } from "../lib/open-graph-scraper/types";
 
 const pageExtensions = [".html", ".php", "htm"];
 
+const openGraphDataCache = new Map<string, OgObjectInteral>();
+
 export default function useOpenGraphData(url: URL) {
   return useAsync(async () => {
-    const controller = new AbortController();
+    if (openGraphDataCache.has(url.toString())) return openGraphDataCache.get(url.toString());
+
     const ext = url.pathname.match(/\.[\w+d]+$/)?.[0];
     if (ext && !pageExtensions.includes(ext)) return null;
 
     try {
+      const controller = new AbortController();
       const res = await fetchWithCorsFallback(url, { signal: controller.signal });
       const contentType = res.headers.get("content-type");
 
       if (contentType?.includes("text/html")) {
         const html = await res.text();
-        return extractMetaTags(html);
+        const data = extractMetaTags(html);
+        openGraphDataCache.set(url.toString(), data);
+        return data;
       } else controller.abort();
     } catch (e) {}
     return null;

src/providers/intersection-observer.tsx

@@ -64,29 +64,29 @@ export default function IntersectionObserverProvider<T = undefined>({
   threshold,
   callback,
 }: PropsWithChildren & {
-  root: MutableRefObject<HTMLElement | null>;
+  root?: MutableRefObject<HTMLElement | null>;
   rootMargin?: IntersectionObserverInit["rootMargin"];
   threshold?: IntersectionObserverInit["threshold"];
   callback: ExtendedIntersectionObserverCallback<T>;
 }) {
   const elementIds = useMemo(() => new WeakMap<Element, T>(), []);
-  const [observer, setObserver] = useState<IntersectionObserver>();
+
+  const handleIntersection = useCallback<IntersectionObserverCallback>((entries, observer) => {
+    callback(
+      entries.map((entry) => {
+        return { entry, id: elementIds.get(entry.target) };
+      }),
+      observer
+    );
+  }, []);
+  const [observer, setObserver] = useState<IntersectionObserver>(
+    () => new IntersectionObserver(handleIntersection, { rootMargin, threshold })
+  );
 
   useMount(() => {
-    if (root.current) {
-      const observer = new IntersectionObserver(
-        (entries, observer) => {
-          callback(
-            entries.map((entry) => {
-              return { entry, id: elementIds.get(entry.target) };
-            }),
-            observer
-          );
-        },
-        { rootMargin, threshold }
-      );
-
-      setObserver(observer);
+    if (root?.current) {
+      // recreate observer with root
+      setObserver(new IntersectionObserver(handleIntersection, { rootMargin, threshold, root: root.current }));
     }
   });
   useUnmount(() => {

src/views/messages/chat.tsx

@@ -63,11 +63,10 @@ function DirectMessageChatPage({ pubkey }: { pubkey: string }) {
     setContent("");
   };
 
-  const scrollBox = useRef<HTMLDivElement | null>(null);
   const callback = useTimelineCurserIntersectionCallback(timeline);
 
   return (
-    <IntersectionObserverProvider root={scrollBox} callback={callback}>
+    <IntersectionObserverProvider callback={callback}>
       <Flex height="100%" overflow="hidden" direction="column">
         <Card size="sm" flexShrink={0}>
           <CardBody display="flex" gap="2" alignItems="center">

src/views/note/index.tsx

@@ -21,7 +21,7 @@ function useNotePointer() {
   }
 }
 
-const NoteView = () => {
+export default function NoteView() {
   const pointer = useNotePointer();
 
   const { thread, events, rootId, focusId, loading } = useThreadLoader(pointer.id, pointer.relays, {
@@ -65,6 +65,4 @@ const NoteView = () => {
       {pageContent}
     </Flex>
   );
-};
-
-export default NoteView;
+}

src/views/notifications/index.tsx

@@ -115,12 +115,11 @@ function NotificationsPage() {
 
   const events = useSubject(timeline?.timeline) ?? [];
 
-  const scrollBox = useRef<HTMLDivElement | null>(null);
   const callback = useTimelineCurserIntersectionCallback(timeline);
 
   return (
-    <IntersectionObserverProvider callback={callback} root={scrollBox}>
-      <Flex direction="column" overflowX="hidden" overflowY="auto" gap="2" ref={scrollBox}>
+    <IntersectionObserverProvider callback={callback}>
+      <Flex direction="column" gap="2">
         {events.map((event) => (
           <NotificationItem key={event.id} event={event} />
         ))}

src/views/streams/index.tsx

@@ -31,7 +31,6 @@ function StreamsPage() {
 
   useRelaysChanged(readRelays, () => timeline.reset());
 
-  const scrollBox = useRef<HTMLDivElement | null>(null);
   const callback = useTimelineCurserIntersectionCallback(timeline);
 
   const events = useSubject(timeline.timeline);
@@ -58,8 +57,8 @@ function StreamsPage() {
         </Select>
         <RelaySelectionButton ml="auto" />
       </Flex>
-      <IntersectionObserverProvider callback={callback} root={scrollBox}>
-        <Flex gap="2" wrap="wrap" overflowY="auto" overflowX="hidden" ref={scrollBox}>
+      <IntersectionObserverProvider callback={callback}>
+        <Flex gap="2" wrap="wrap">
           {streams.map((stream) => (
             <StreamCard key={stream.event.id} stream={stream} w="sm" />
           ))}

src/views/user/likes.tsx

@@ -60,13 +60,12 @@ export default function UserLikesTab() {
 
   const lines = useSubject(timeline.timeline);
 
-  const scrollBox = useRef<HTMLDivElement | null>(null);
   const callback = useTimelineCurserIntersectionCallback(timeline);
 
   return (
-    <IntersectionObserverProvider callback={callback} root={scrollBox}>
+    <IntersectionObserverProvider callback={callback}>
       <TrustProvider trust>
-        <Flex direction="column" gap="2" p="2" pb="8" h="full" overflowY="auto" ref={scrollBox}>
+        <Flex direction="column" gap="2" p="2" pb="8">
           {lines.map((event) => (
             <Like event={event} />
           ))}

src/views/user/streams.tsx

@@ -1,4 +1,3 @@
-import { useRef } from "react";
 import { Flex } from "@chakra-ui/react";
 import { useOutletContext } from "react-router-dom";
 import { truncatedId } from "../../helpers/nostr-event";
@@ -22,12 +21,11 @@ export default function UserStreamsTab() {
     { "#p": [pubkey], kinds: [STREAM_KIND] },
   ]);
 
-  const scrollBox = useRef<HTMLDivElement | null>(null);
   const callback = useTimelineCurserIntersectionCallback(timeline);
 
   return (
-    <IntersectionObserverProvider<string> root={scrollBox} callback={callback}>
-      <Flex direction="column" gap="2" pt="4" pb="8" h="full" overflowY="auto" overflowX="hidden" ref={scrollBox}>
+    <IntersectionObserverProvider<string> callback={callback}>
+      <Flex direction="column" gap="2" pt="4" pb="8">
         <GenericNoteTimeline timeline={timeline} />
         <TimelineActionAndStatus timeline={timeline} />
       </Flex>

src/views/user/zaps.tsx

@@ -102,12 +102,11 @@ const UserZapsTab = () => {
     return parsed;
   }, [events]);
 
-  const scrollBox = useRef<HTMLDivElement | null>(null);
   const callback = useTimelineCurserIntersectionCallback(timeline);
 
   return (
-    <IntersectionObserverProvider callback={callback} root={scrollBox}>
-      <Flex direction="column" gap="2" p="2" pb="8" h="full" overflowY="auto" ref={scrollBox}>
+    <IntersectionObserverProvider callback={callback}>
+      <Flex direction="column" gap="2" p="2" pb="8">
         <Flex gap="2" alignItems="center" wrap="wrap">
           <Select value={filter} onChange={(e) => setFilter(e.target.value)} maxW="md">
             <option value="both">Note & Profile Zaps</option>