From d9d81372b80f7d44dca54b7993f52c36574048c9 Mon Sep 17 00:00:00 2001 From: Paul Nothaft Date: Fri, 1 May 2026 20:55:19 +0200 Subject: [PATCH] fix(gallery): lazy-render skeleton grid for fast loads (#321 follow-up) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The gallery loading skeleton now renders the header bars immediately but delays the 12-tile placeholder grid by 300ms. Galleries that load quickly (the common case) never flash the empty grid before the real photos render — addressing the follow-up reported on #321 — while slower loads still get a placeholder so the page doesn't sit blank. --- .../components/gallery/GallerySkeleton.tsx | 56 +++++++++++-------- 1 file changed, 33 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/gallery/GallerySkeleton.tsx b/frontend/src/components/gallery/GallerySkeleton.tsx index 4f2046d4..defe4db9 100644 --- a/frontend/src/components/gallery/GallerySkeleton.tsx +++ b/frontend/src/components/gallery/GallerySkeleton.tsx @@ -1,31 +1,41 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Skeleton, SkeletonGalleryGrid } from '../common'; /** * Loading placeholder shown while a gallery is resolving (slug → info → - * auto-login → photos). Used by GalleryPage during the pre-photos phases and - * by GalleryView while the photos query runs, so the visitor sees one - * continuous skeleton instead of multiple full-page interstitials (#321). + * auto-login → photos). The tile grid is delayed 300ms so fast loads + * never flash an empty grid before the real photos render (#321 follow-up). */ -export const GallerySkeleton: React.FC = () => ( -
-
-
-
-
- - -
-
- - +export const GallerySkeleton: React.FC = () => { + const [showGrid, setShowGrid] = useState(false); + + useEffect(() => { + const t = setTimeout(() => setShowGrid(true), 300); + return () => clearTimeout(t); + }, []); + + return ( +
+
+
+
+
+ + +
+
+ + +
-
-
-
- - + + {showGrid && ( +
+ + +
+ )}
-
-); + ); +};