preload next & prev grid image modal

packages/app/src/Element/Feed/TimelineRenderer.tsx

@@ -36,6 +36,8 @@ function Grid({ frags }: { frags: Array<TimelineFragment> }) {
   }, [allEvents]);
 
   const modalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex] : undefined;
+  const nextModalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex + 1] : undefined;
+  const prevModalThread = modalThreadIndex !== undefined ? mediaEvents[modalThreadIndex - 1] : undefined;
 
   return (
     <>
@@ -46,7 +48,7 @@ function Grid({ frags }: { frags: Array<TimelineFragment> }) {
       </div>
       {modalThread && (
         <SpotlightThreadModal
-          key={modalThreadIndex}
+          key={modalThread.id}
           thread={NostrLink.fromEvent(modalThread)}
           onClose={() => setModalThreadIndex(undefined)}
           onBack={() => setModalThreadIndex(undefined)}
@@ -54,6 +56,20 @@ function Grid({ frags }: { frags: Array<TimelineFragment> }) {
           onPrev={() => setModalThreadIndex(Math.max(modalThreadIndex - 1, 0))}
         />
       )}
+      {nextModalThread && ( // preload next
+        <SpotlightThreadModal
+          className="hidden"
+          key={`${nextModalThread.id}-next`}
+          thread={NostrLink.fromEvent(nextModalThread)}
+        />
+      )}
+      {prevModalThread && ( // preload previous
+        <SpotlightThreadModal
+          className="hidden"
+          key={`${prevModalThread.id}-prev`}
+          thread={NostrLink.fromEvent(prevModalThread)}
+        />
+      )}
     </>
   );
 }

packages/app/src/Element/Modal.tsx

@@ -60,7 +60,7 @@ export default function Modal(props: ModalProps) {
   }, []);
 
   return createPortal(
-    <div className={`modal${props.className ? ` ${props.className}` : ""}`} onClick={props.onClose}>
+    <div className={props.className === "hidden" ? props.className : `modal ${props.className || ""}`} onClick={props.onClose}>
       <div
         className={props.bodyClassName || "modal-body"}
         onClick={e => {

packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx

@@ -8,6 +8,7 @@ import getEventMedia from "@/Element/Event/getEventMedia";
 
 interface SpotlightThreadModalProps {
   thread: NostrLink;
+  className?: string;
   onClose?: () => void;
   onBack?: () => void;
   onNext?: () => void;
@@ -24,7 +25,7 @@ export function SpotlightThreadModal(props: SpotlightThreadModalProps) {
   };
 
   return (
-    <Modal id="thread-overlay" onClose={onClose} bodyClassName={"flex flex-1"}>
+    <Modal className={props.className} onClose={onClose} bodyClassName={"flex flex-1"}>
       <ThreadContextWrapper link={props.thread}>
         <div className="flex flex-row h-screen w-screen">
           <div className="flex w-full md:w-2/3 items-center justify-center overflow-hidden" onClick={onClickBg}>

packages/app/src/Pages/DeckLayout.tsx

@@ -123,9 +123,8 @@ export function SnortDeckLayout() {
           {deckState.article && (
             <>
               <Modal
-                id="thread-overlay-article"
                 onClose={() => setDeckState({})}
-                className="thread-overlay long-form"
+                className="long-form"
                 onClick={() => setDeckState({})}>
                 <div onClick={e => e.stopPropagation()}>
                   <LongFormText ev={deckState.article} isPreview={false} related={[]} />