perf: keep the photo lightbox and the date picker off the first load

resources/js/components/chat/message-parts.tsx

@@ -1,6 +1,6 @@
 import { Image, Mic, Pin, Reply, SmilePlus } from 'lucide-react';
 import type { ReactNode, RefObject } from 'react';
-import { useEffect, useRef, useState } from 'react';
+import { lazy, Suspense, useEffect, useRef, useState } from 'react';
 import { show as showMessageImage } from '@/actions/App/Http/Controllers/MessageImageController';
 import MessageLinkPreviewController from '@/actions/App/Http/Controllers/MessageLinkPreviewController';
 import { preloadEmojiGroups } from '@/components/chat/message-reactions';
@@ -9,7 +9,6 @@ import { CommitBody } from '@/components/commit-body';
 import { objectUrlFor } from '@/components/commit-image-picker';
 import { CommitImages } from '@/components/commit-images';
 import type { ShownImage } from '@/components/commit-images';
-import { ImageViewer } from '@/components/image-viewer';
 import { LinkPreview } from '@/components/link-preview';
 import { bodySegments } from '@/lib/code';
 import { isReplySwipe, replyPull, replyThreshold } from '@/lib/reply-swipe';
@@ -22,6 +21,16 @@ import type {
     MessageReply,
 } from '@/types';
 
+/**
+ * Only needed once an image in a message is opened, which keeps the viewer and its styles out of the chat dock's
+ * bundle, and so out of the first load of every page the dock is part of.
+ */
+const ImageViewer = lazy(() =>
+    import('@/components/image-viewer').then((module) => ({
+        default: module.ImageViewer,
+    })),
+);
+
 /**
  * Who wrote a message, as a reply's ghost names them.
  */
@@ -135,13 +144,15 @@ export function MessageImages({ images }: { images: MessageImage[] | File[] }) {
             ) : (
                 <>
                     <CommitImages images={images} onOpen={setViewedIndex} />
-                    <ImageViewer
-                        images={images}
-                        index={viewedIndex}
-                        onView={setViewedIndex}
-                        onClose={() => setViewedIndex(null)}
-                        downloadUrl={downloadUrl}
-                    />
+                    <Suspense fallback={null}>
+                        <ImageViewer
+                            images={images}
+                            index={viewedIndex}
+                            onView={setViewedIndex}
+                            onClose={() => setViewedIndex(null)}
+                            downloadUrl={downloadUrl}
+                        />
+                    </Suspense>
                 </>
             )}
         </div>

resources/js/components/commit-composer.tsx

@@ -1,7 +1,7 @@
 import { Form, Link, usePage } from '@inertiajs/react';
 import { ChartBar, Clock3 } from 'lucide-react';
 import type { KeyboardEvent } from 'react';
-import { useEffect, useRef, useState } from 'react';
+import { lazy, Suspense, useEffect, useRef, useState } from 'react';
 import CommitController from '@/actions/App/Http/Controllers/CommitController';
 import ScheduledCommitController from '@/actions/App/Http/Controllers/ScheduledCommitController';
 import { ActionTooltip } from '@/components/action-tooltip';
@@ -32,10 +32,6 @@ import { LinkCardPicker } from '@/components/link-card-picker';
 import { MentionTextarea } from '@/components/mention-textarea';
 import type { PollDraft } from '@/components/poll-editor';
 import { emptyPollDraft, PollEditor } from '@/components/poll-editor';
-import {
-    isExistingLocalTime,
-    SchedulePicker,
-} from '@/components/schedule-picker';
 import { StashLabel } from '@/components/stash-label';
 import { Button } from '@/components/ui/button';
 import { useImageAttachments } from '@/hooks/use-image-attachments';
@@ -57,6 +53,7 @@ import {
 } from '@/lib/commit';
 import type { IssueKind } from '@/lib/issue-commands';
 import { hasModKey, useKeyLabels } from '@/lib/keyboard';
+import { isExistingLocalTime } from '@/lib/schedule';
 import {
     characterCount,
     cn,
@@ -66,6 +63,16 @@ import {
 import { show } from '@/routes/user';
 import type { User } from '@/types';
 
+/**
+ * Scheduling is behind a toggle, and the calendar it opens is heavy, so it loads when the composer is used
+ * rather than with the composer itself. Validating a time only needs the arithmetic in "@/lib/schedule".
+ */
+const SchedulePicker = lazy(() =>
+    import('@/components/schedule-picker').then((module) => ({
+        default: module.SchedulePicker,
+    })),
+);
+
 // The ring moves quickly while a post starts and slows toward the limit, yet only closes at the limit.
 function bodyProgress(count: number): number {
     return Math.log1p(count) / Math.log1p(maxBodyLength);
@@ -370,13 +377,15 @@ function CommitComposerBody({
                             >
                                 Submit at
                             </label>
-                            <SchedulePicker
-                                id={`${id}-scheduled-at`}
-                                value={scheduledAt}
-                                onChange={setScheduledAt}
-                                invalid={scheduleError ? true : undefined}
-                                describedBy={`${id}-schedule-help ${id}-schedule-error`}
-                            />
+                            <Suspense fallback={null}>
+                                <SchedulePicker
+                                    id={`${id}-scheduled-at`}
+                                    value={scheduledAt}
+                                    onChange={setScheduledAt}
+                                    invalid={scheduleError ? true : undefined}
+                                    describedBy={`${id}-schedule-help ${id}-schedule-error`}
+                                />
+                            </Suspense>
                             <p
                                 id={`${id}-schedule-help`}
                                 className="text-xs leading-relaxed text-muted-foreground"

resources/js/components/commit-image-picker.tsx

@@ -1,8 +1,7 @@
 import { ImagePlus, X } from 'lucide-react';
-import { useId, useRef, useState } from 'react';
+import { lazy, Suspense, useId, useRef, useState } from 'react';
 import { ActionTooltip } from '@/components/action-tooltip';
 import type { ShownImage } from '@/components/commit-images';
-import { ImageViewer } from '@/components/image-viewer';
 import { Button } from '@/components/ui/button';
 import {
     acceptedImageTypes,
@@ -16,6 +15,15 @@ export { maxImages } from '@/lib/read-picked-images';
 
 export const maxDescriptionLength = 1000;
 
+/**
+ * Only needed once a picked image is opened, which keeps the viewer and its styles out of the composer's bundle.
+ */
+const ImageViewer = lazy(() =>
+    import('@/components/image-viewer').then((module) => ({
+        default: module.ImageViewer,
+    })),
+);
+
 /**
  * Keeps the files the server would accept, and tells why any others were left out.
  */
@@ -167,6 +175,10 @@ export function ImagePickerPreviews({
     const id = useId();
     const [describedIndex, setDescribedIndex] = useState<number | null>(null);
     const [viewedIndex, setViewedIndex] = useState<number | null>(null);
+    // The viewer is a chunk of its own, and rendering it at mount fetches it as soon as a composer holds an
+    // image, whether or not a preview is ever opened. It is mounted on the first open and left mounted after
+    // that, so closing it passes a null index: the lightbox animates out and keeps the state it had.
+    const [hasOpenedViewer, setHasOpenedViewer] = useState(false);
     const urls = images.map(objectUrlFor);
 
     if (images.length === 0) {
@@ -184,6 +196,11 @@ export function ImagePickerPreviews({
     const altButtonId = (index: number) => `${id}-alt-${index}`;
     const previewButtonId = (index: number) => `${id}-preview-${index}`;
 
+    const openViewer = (index: number) => {
+        setHasOpenedViewer(true);
+        setViewedIndex(index);
+    };
+
     const closeViewer = () => {
         const indexToFocus = activeViewedIndex;
         setViewedIndex(null);
@@ -238,7 +255,7 @@ export function ImagePickerPreviews({
                             <button
                                 id={previewButtonId(index)}
                                 type="button"
-                                onClick={() => setViewedIndex(index)}
+                                onClick={() => openViewer(index)}
                                 aria-label={`Preview attached image ${index + 1}`}
                                 className="block cursor-pointer overflow-hidden rounded-md border bg-muted text-left transition hover:opacity-90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
                                 data-test="preview-image-button"
@@ -298,14 +315,18 @@ export function ImagePickerPreviews({
                 })}
             </ul>
 
-            <ImageViewer
-                images={shownImages}
-                index={activeViewedIndex}
-                onView={setViewedIndex}
-                onClose={closeViewer}
-                downloadUrl={(image) => image.url}
-                downloadFilename={downloadFilename}
-            />
+            {hasOpenedViewer && (
+                <Suspense fallback={null}>
+                    <ImageViewer
+                        images={shownImages}
+                        index={activeViewedIndex}
+                        onView={setViewedIndex}
+                        onClose={closeViewer}
+                        downloadUrl={(image) => image.url}
+                        downloadFilename={downloadFilename}
+                    />
+                </Suspense>
+            )}
 
             {editing !== null && (
                 <div

resources/js/components/schedule-picker.tsx

@@ -15,31 +15,14 @@ import {
     SelectValue,
 } from '@/components/ui/select';
 import { useNow } from '@/hooks/use-now';
+import { localDateTime, pad } from '@/lib/schedule';
 import { cn, dateLocale } from '@/lib/utils';
 
 export const maxScheduleDays = 30;
 
 const hours = Array.from({ length: 24 }, (_, hour) => hour);
 const minutes = Array.from({ length: 12 }, (_, index) => index * 5);
 
-function pad(value: number): string {
-    return String(value).padStart(2, '0');
-}
-
-/**
- * Writes a date the way a `datetime-local` input does, in the browser's timezone.
- */
-export function localDateTime(date: Date): string {
-    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
-}
-
-/**
- * A local time skipped by a daylight saving change, like 02:30 on the night clocks go forward, comes back shifted.
- */
-export function isExistingLocalTime(value: string): boolean {
-    return localDateTime(new Date(value)) === value;
-}
-
 function startOfDay(date: Date): Date {
     return new Date(date.getFullYear(), date.getMonth(), date.getDate());
 }

resources/js/layouts/app-layout.tsx

@@ -1,5 +1,5 @@
 import { Head, usePage, usePoll } from '@inertiajs/react';
-import { useCallback, useEffect, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useState } from 'react';
 import { AppAside } from '@/components/app-aside';
 import {
     AppNav,
@@ -12,7 +12,6 @@ import {
     CommitComposerDialog,
     focusVisibleComposer,
 } from '@/components/commit-composer-dialog';
-import { CommitImageViewer } from '@/components/commit-image-viewer';
 import { CommitStarPolling } from '@/components/commit-star-polling';
 import { DeletedPageDialog } from '@/components/deleted-page-dialog';
 import { endStream, GoLiveDialog } from '@/components/go-live-dialog';
@@ -36,6 +35,17 @@ import type { SearchAction } from '@/lib/search-actions';
 import { cn } from '@/lib/utils';
 import type { AppLayoutProps } from '@/types';
 
+/**
+ * The photo lightbox is only needed once a photo is opened, and it is heavy enough (a viewer, three plugins and
+ * their stylesheets) to keep off the first load every page pays for. Loading it lazily leaves it out of the
+ * bundle the layout is part of, and the browser fetches it right after hydration instead of blocking on it.
+ */
+const CommitImageViewer = lazy(() =>
+    import('@/components/commit-image-viewer').then((module) => ({
+        default: module.CommitImageViewer,
+    })),
+);
+
 export default function AppLayout({ children }: AppLayoutProps) {
     const {
         component,
@@ -152,7 +162,9 @@ export default function AppLayout({ children }: AppLayoutProps) {
                 </MobileNav>
 
                 {deletedPage === null ? (
-                    <CommitImageViewer />
+                    <Suspense fallback={null}>
+                        <CommitImageViewer />
+                    </Suspense>
                 ) : (
                     <DeletedPageDialog page={deletedPage} />
                 )}

resources/js/lib/schedule.ts

@@ -0,0 +1,22 @@
+/**
+ * The pieces of the schedule picker that are only date arithmetic, kept apart from the picker itself so that
+ * anything validating a scheduled time does not have to load the calendar to do it.
+ */
+
+export function pad(value: number): string {
+    return String(value).padStart(2, '0');
+}
+
+/**
+ * Writes a date the way a `datetime-local` input does, in the browser's timezone.
+ */
+export function localDateTime(date: Date): string {
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+/**
+ * A local time skipped by a daylight saving change, like 02:30 on the night clocks go forward, comes back shifted.
+ */
+export function isExistingLocalTime(value: string): boolean {
+    return localDateTime(new Date(value)) === value;
+}