From 47f70b0157e6b23b66c88de4032003bb75df3984 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Tue, 19 Dec 2023 16:19:59 +0200
Subject: [PATCH] preload next & prev grid image modal

---
 .../app/src/Element/Feed/TimelineRenderer.tsx  | 18 +++++++++++++++++-
 packages/app/src/Element/Modal.tsx             |  2 +-
 .../Element/Spotlight/SpotlightThreadModal.tsx |  3 ++-
 packages/app/src/Pages/DeckLayout.tsx          |  3 +--
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/Element/Feed/TimelineRenderer.tsx b/packages/app/src/Element/Feed/TimelineRenderer.tsx
index bb11cb73..f1a1e104 100644
--- a/packages/app/src/Element/Feed/TimelineRenderer.tsx
+++ b/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)}
+        />
+      )}
     </>
   );
 }
diff --git a/packages/app/src/Element/Modal.tsx b/packages/app/src/Element/Modal.tsx
index fd3341ce..9bc0c4e9 100644
--- a/packages/app/src/Element/Modal.tsx
+++ b/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 => {
diff --git a/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx b/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx
index 6c36695a..0dfdf5c6 100644
--- a/packages/app/src/Element/Spotlight/SpotlightThreadModal.tsx
+++ b/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}>
diff --git a/packages/app/src/Pages/DeckLayout.tsx b/packages/app/src/Pages/DeckLayout.tsx
index e190f90c..ce975262 100644
--- a/packages/app/src/Pages/DeckLayout.tsx
+++ b/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={[]} />