fix(gallery): lazy-render skeleton grid for fast loads (#321 follow-up)

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.

frontend/src/components/gallery/GallerySkeleton.tsx

@@ -1,13 +1,20 @@
-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
+ * auto-login → photos). The tile grid is delayed 300ms so fast loads
- * by GalleryView while the photos query runs, so the visitor sees one
+ * never flash an empty grid before the real photos render (#321 follow-up).
- * continuous skeleton instead of multiple full-page interstitials (#321).
  */
-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 (
     <div className="min-h-screen" style={{ backgroundColor: 'var(--color-background, #fafafa)' }}>
       <header className="bg-surface border-b border-surface sticky top-0 z-40">
         <div className="container py-4">
@@ -23,9 +30,12 @@ export const GallerySkeleton: React.FC = () => (
           </div>
         </div>
       </header>
+      {showGrid && (
         <div className="container mt-6">
           <Skeleton height={80} className="mb-6" />
           <SkeletonGalleryGrid count={12} />
         </div>
+      )}
     </div>
   );
+};