MediaAttachmentGrid: lazily created viewer

The reworked viewer presentation process delay the
creation of the viewer until the user interaction,
to reduce the DOM created during viewing the list.

src/timelines/MediaAttachmentGrid.tsx

@@ -1,8 +1,9 @@
 import type { mastodon } from "masto";
-import { type Component, For, createSignal } from "solid-js";
+import { type Component, For, createSignal, onMount } from "solid-js";
 import { css } from "solid-styled";
 import tootStyle from "./toot.module.css";
 import MediaViewer from "./MediaViewer";
+import { render } from "solid-js/web";
 
 const MediaAttachmentGrid: Component<{
   attachments: mastodon.v1.MediaAttachment[];
@@ -23,6 +24,25 @@ const MediaAttachmentGrid: Component<{
 
   const openViewerFor = (index: number) => {
     setViewerIndex(index);
+    const container = document.createElement("div");
+    container.setAttribute("role", "presentation");
+    document.body.appendChild(container);
+    let dispose: () => void
+    dispose = render(() => {
+      return (
+        <MediaViewer
+          show={viewerOpened()}
+          index={viewerIndex() || 0}
+          onIndexUpdated={setViewerIndex}
+          media={props.attachments}
+          onClose={() => {
+            setViewerIndex(undefined);
+            dispose();
+            document.body.removeChild(container)
+          }}
+        />
+      );
+    }, container);
   };
 
   css`
@@ -56,13 +76,6 @@ const MediaAttachmentGrid: Component<{
           }
         }}
       </For>
-        <MediaViewer
-          show={viewerOpened()}
-          index={viewerIndex() || 0}
-          onIndexUpdated={setViewerIndex}
-          media={props.attachments}
-          onClose={() => setViewerIndex(undefined)}
-        />
     </section>
   );
 };