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
+      )}
     />
   );
 }

frontend/src/components/ui/Spinner.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+
+// Inline busy indicator in the same style as the full-page loaders
+// (animate-spin ring with one contrasting edge). Purely decorative: callers
+// own the accessible state via aria-busy / aria-label. Defaults to the
+// white-on-dark ring used by the photo overlay controls; pass `border-*`
+// classes to restyle it elsewhere.
+export default function Spinner({ className }: { className?: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={clsx(
+        'inline-block rounded-full border-2 animate-spin border-white/40 border-t-white',
+        className || 'w-4 h-4'
+      )}
+    />
+  );
+}