@@ -729,12 +751,19 @@ const MovementArtistPortrait = memo(function MovementArtistPortrait({
alt={artist.name}
loading="lazy"
decoding="async"
+ onLoad={settlePortraitLoad}
onError={(e) => {
+ settlePortraitLoad();
(e.target as HTMLImageElement).src = '/placeholder-portrait.svg';
}}
/>
) : (
-
+
)}
{artist.name}
@@ -754,8 +783,11 @@ export default function MovementBands({
onArtistClick,
onMovementClick,
onArtistHover,
+ onPortraitsLoadingChange,
}: Props) {
const canvasRef = useRef
(null);
+ const pendingPortraitsRef = useRef(0);
+ const [portraitsLoading, setPortraitsLoading] = useState(false);
const [panning, setPanning] = useState(false);
const [interacting, setInteracting] = useState(false);
const [canvasHeight, setCanvasHeight] = useState(DEFAULT_CANVAS_HEIGHT);
@@ -769,6 +801,15 @@ export default function MovementBands({
viewRef.current = { viewStart, viewEnd };
onViewChangeRef.current = onViewChange;
+ const handlePortraitLoadChange = useCallback((delta: number) => {
+ pendingPortraitsRef.current += delta;
+ setPortraitsLoading(pendingPortraitsRef.current > 0);
+ }, []);
+
+ useEffect(() => {
+ onPortraitsLoadingChange?.(portraitsLoading);
+ }, [portraitsLoading, onPortraitsLoadingChange]);
+
const markInteracting = useCallback(() => {
setInteracting(true);
if (interactionTimer.current != null) {
@@ -860,15 +901,23 @@ export default function MovementBands({
return map;
}, [artists, viewStart, viewEnd]);
+ const movementsWithArtists = useMemo(() => {
+ const set = new Set();
+ for (const artist of artists) {
+ if (artist.movement_id) set.add(artist.movement_id);
+ }
+ return set;
+ }, [artists]);
+
const visibleMovements = useMemo(
() =>
movements.filter(
(m) =>
m.end_year >= viewStart &&
m.start_year <= viewEnd &&
- (artistsByMovement.get(m.id)?.length ?? 0) > 0
+ movementsWithArtists.has(m.id)
),
- [movements, viewStart, viewEnd, artistsByMovement]
+ [movements, viewStart, viewEnd, movementsWithArtists]
);
useLayoutEffect(() => {
@@ -1342,6 +1391,7 @@ export default function MovementBands({
onArtistHover={onArtistHover}
onHoverStart={() => setHoveredArtistKey(artistKey)}
onHoverEnd={() => setHoveredArtistKey(null)}
+ onPortraitLoadChange={handlePortraitLoadChange}
/>
);
})}
diff --git a/client/src/components/VirtualGallery.tsx b/client/src/components/VirtualGallery.tsx
index cd6f024..967b1e6 100644
--- a/client/src/components/VirtualGallery.tsx
+++ b/client/src/components/VirtualGallery.tsx
@@ -1,4 +1,5 @@
-import { useRef, useState, useEffect, useMemo, Suspense, useCallback } from 'react';
+import { useRef, useState, useEffect, useMemo, Suspense, useCallback, createContext, useContext, Component } from 'react';
+import type { ReactNode } from 'react';
import { Canvas, useFrame, useThree } from '@react-three/fiber';
import { Text, Environment } from '@react-three/drei';
import * as THREE from 'three';
@@ -11,7 +12,6 @@ import type {
MovementArtistGroup,
} from '../types';
import { galleryImageUrlWithRevision, imageUrl, api } from '../api/client';
-import { loadTextureQueued } from '../utils/textureLoadQueue';
import { comparePaintingsChronological, paintingHasInfluenceLinks, paintingWallCaption } from '../utils/paintingUtils';
import { cloneSurfaceTexture, getSurfaceTexture } from '../utils/galleryProceduralTextures';
import { resolveMovementInteriorStyle, type MovementInteriorStyle, type GalleryWindowSpec } from '../data/movement-interior-styles';
@@ -25,6 +25,36 @@ import {
type MovementHallLayout,
} from '../utils/movementHallLayout';
import './VirtualGallery.css';
+import GalleryLoadingMarker from './GalleryLoadingMarker';
+
+const GalleryTextureLoadContext = createContext<{
+ begin: () => void;
+ end: () => void;
+} | null>(null);
+
+/**
+ * Keeps a single failing subtree (e.g. the network-loaded HDR environment map)
+ * from unmounting the whole 3D scene and leaving a dark window.
+ */
+class SceneErrorBoundary extends Component<
+ { children: ReactNode; fallback?: ReactNode },
+ { hasError: boolean }
+> {
+ state = { hasError: false };
+
+ static getDerivedStateFromError() {
+ return { hasError: true };
+ }
+
+ componentDidCatch(error: unknown) {
+ console.warn('Gallery scene subtree failed, continuing without it.', error);
+ }
+
+ render() {
+ if (this.state.hasError) return this.props.fallback ?? null;
+ return this.props.children;
+ }
+}
interface BaseGalleryProps {
imageRevisions?: Record;
@@ -551,6 +581,7 @@ function CanvasCover({
function usePaintingTexture(url: string | null) {
const [texture, setTexture] = useState(null);
const [failed, setFailed] = useState(!url);
+ const textureLoad = useContext(GalleryTextureLoadContext);
useEffect(() => {
if (!url) {
@@ -562,9 +593,21 @@ function usePaintingTexture(url: string | null) {
setFailed(false);
let disposed = false;
let loaded: THREE.Texture | null = null;
+ let settled = false;
+ const loader = new THREE.TextureLoader();
+ loader.setCrossOrigin('anonymous');
- loadTextureQueued(url)
- .then((tex) => {
+ const finish = () => {
+ if (settled) return;
+ settled = true;
+ textureLoad?.end();
+ };
+
+ textureLoad?.begin();
+ loader.load(
+ url,
+ (tex) => {
+ finish();
if (disposed) {
tex.dispose();
return;
@@ -579,17 +622,21 @@ function usePaintingTexture(url: string | null) {
tex.colorSpace = THREE.SRGBColorSpace;
tex.anisotropy = 4;
setTexture(tex);
- })
- .catch(() => {
+ },
+ undefined,
+ () => {
+ finish();
if (!disposed) setFailed(true);
- });
+ }
+ );
return () => {
disposed = true;
+ finish();
loaded?.dispose();
setTexture(null);
};
- }, [url]);
+ }, [url, textureLoad]);
return { texture, failed };
}
@@ -1485,6 +1532,14 @@ function levelHorizontalView(pos: THREE.Vector3, target: THREE.Vector3) {
target.y = EYE_HEIGHT;
}
+function FrameloopSync({ active }: { active: boolean }) {
+ const { invalidate } = useThree();
+ useEffect(() => {
+ if (active) invalidate();
+ }, [active, invalidate]);
+ return null;
+}
+
function CameraController({
position,
target,
@@ -1643,7 +1698,7 @@ export default function VirtualGallery(props: Props) {
return [...props.data.paintings].sort(comparePaintingsChronological);
}
return props.data.paintings;
- }, [props]);
+ }, [props.mode, props.mode === 'movement' ? props.data.movement.id : props.data.artist.id, props.data.paintings]);
const initialPeriods = isMovement ? [] : props.data.periods;
const [paintings, setPaintings] = useState(initialPaintings);
@@ -1655,6 +1710,46 @@ export default function VirtualGallery(props: Props) {
const [nearExit, setNearExit] = useState(false);
const [nearPassage, setNearPassage] = useState(false);
const [isLooking, setIsLooking] = useState(false);
+ const [texturesPending, setTexturesPending] = useState(0);
+ const [glEpoch, setGlEpoch] = useState(0);
+ const [glLost, setGlLost] = useState(false);
+
+ const textureLoad = useMemo(
+ () => ({
+ begin: () => setTexturesPending((n) => n + 1),
+ end: () => setTexturesPending((n) => Math.max(0, n - 1)),
+ }),
+ []
+ );
+
+ useEffect(() => {
+ setTexturesPending(0);
+ }, [hallKey, glEpoch]);
+
+ const handleCanvasCreated = useCallback((state: { gl: THREE.WebGLRenderer }) => {
+ const canvas = state.gl.domElement;
+ // A freshly created canvas has a healthy context, so clear any lingering
+ // "restoring" state from a previous loss/remount.
+ setGlLost(false);
+ const onLost = (event: Event) => {
+ // Prevent the default so the browser can restore the context, and
+ // force a clean remount to obtain a fresh WebGL context if it does not.
+ event.preventDefault();
+ setGlLost(true);
+ window.setTimeout(() => {
+ setGlLost((stillLost) => {
+ if (stillLost) setGlEpoch((n) => n + 1);
+ return stillLost;
+ });
+ }, 600);
+ };
+ const onRestored = () => {
+ setGlLost(false);
+ setGlEpoch((n) => n + 1);
+ };
+ canvas.addEventListener('webglcontextlost', onLost as EventListener, false);
+ canvas.addEventListener('webglcontextrestored', onRestored as EventListener, false);
+ }, []);
useEffect(() => {
setPaintings(initialPaintings);
@@ -1974,7 +2069,10 @@ export default function VirtualGallery(props: Props) {
onPointerLeave={endCanvasDrag}
onPointerCancel={endCanvasDrag}
>
- {syncStatus && (
+ {active && texturesPending > 0 && (
+
+ )}
+ {syncStatus && texturesPending === 0 && (
@@ -1982,11 +2080,18 @@ export default function VirtualGallery(props: Props) {
{!showExitNav && (
{exitHint}
)}
+ {glLost && (
+
+ )}