MediaAttachmentGrid: lazily created viewer
All checks were successful
/ depoly (push) Successful in 1m7s

The reworked viewer presentation process delay the
creation of the viewer until the user interaction,
to reduce the DOM created during viewing the list.
This commit is contained in:
thislight 2024-09-14 20:21:19 +08:00
parent bf7e694e00
commit e8a4e382ba
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E

View file

@ -1,8 +1,9 @@
import type { mastodon } from "masto"; 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 { css } from "solid-styled";
import tootStyle from "./toot.module.css"; import tootStyle from "./toot.module.css";
import MediaViewer from "./MediaViewer"; import MediaViewer from "./MediaViewer";
import { render } from "solid-js/web";
const MediaAttachmentGrid: Component<{ const MediaAttachmentGrid: Component<{
attachments: mastodon.v1.MediaAttachment[]; attachments: mastodon.v1.MediaAttachment[];
@ -23,6 +24,25 @@ const MediaAttachmentGrid: Component<{
const openViewerFor = (index: number) => { const openViewerFor = (index: number) => {
setViewerIndex(index); 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` css`
@ -56,13 +76,6 @@ const MediaAttachmentGrid: Component<{
} }
}} }}
</For> </For>
<MediaViewer
show={viewerOpened()}
index={viewerIndex() || 0}
onIndexUpdated={setViewerIndex}
media={props.attachments}
onClose={() => setViewerIndex(undefined)}
/>
</section> </section>
); );
}; };