Share gallery layout with loading skeletons and add download progress.

Keep the public gallery hero/masonry geometry stable across route and client loading, and show busy state while photos download.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/components/ui/Skeleton.tsx

@@ -9,11 +9,21 @@ interface SkeletonProps {
   className?: string;
 }
 
-export function Skeleton({ className }: SkeletonProps) {
+export function Skeleton({
+  className,
+  tone = 'default',
+}: SkeletonProps & {
+  /** `on-dark` lightens the surface for placeholders over a dark hero. */
+  tone?: 'default' | 'on-dark';
+}) {
   return (
     <div
       aria-hidden="true"
-      className={clsx('animate-pulse rounded-lg bg-secondary-light-gray/70', className)}
+      className={clsx(
+        'animate-pulse motion-reduce:animate-none rounded-lg',
+        tone === 'on-dark' ? 'bg-white/20' : 'bg-secondary-light-gray/70',
+        className
+      )}
     />
   );
 }