refactor: Replace spinner with board loading indicator for infinite scroll

Use the animated board loading component instead of Ant Design's Spin
component when loading more climbs via infinite scroll, providing a
more cohesive visual experience that matches the app's theming.

Author: claude

packages/web/app/components/board-page/climbs-list.tsx

@@ -1,6 +1,7 @@
 'use client';
 import React, { useEffect, useRef, useCallback } from 'react';
-import { Row, Col, Skeleton, Spin } from 'antd';
+import { Row, Col } from 'antd';
+import InlineBoardLoading from '../loading/inline-board-loading';
 import { track } from '@vercel/analytics';
 import { Climb, ParsedBoardRouteParameters, BoardDetails } from '@/app/lib/types';
 import { useQueueContext } from '../graphql-queue';
@@ -158,7 +159,7 @@ const ClimbsList = ({ boardDetails, initialClimbs }: ClimbsListProps) => {
       <div ref={loadMoreRef} style={{ height: '20px', marginTop: '16px' }}>
         {isFetchingClimbs && climbs.length > 0 && (
           <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
-            <Spin />
+            <InlineBoardLoading boardDetails={boardDetails} />
           </div>
         )}
         {!hasMoreResults && climbs.length > 0 && (

packages/web/app/components/loading/inline-board-loading.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React, { useState, useEffect, useMemo } from 'react';
+import BoardRenderer from '../board-renderer/board-renderer';
+import { BoardDetails } from '@/app/lib/types';
+import { LitUpHoldsMap } from '../board-renderer/types';
+import { themeTokens } from '@/app/theme/theme-config';
+
+interface InlineBoardLoadingProps {
+  boardDetails: BoardDetails;
+  size?: number;
+}
+
+const InlineBoardLoading: React.FC<InlineBoardLoadingProps> = ({ boardDetails, size = 80 }) => {
+  const [animationFrame, setAnimationFrame] = useState(0);
+
+  // Generate animated holds map with radial sweep animation (like clock hands)
+  const animatedHoldsMap = useMemo<LitUpHoldsMap>(() => {
+    if (!boardDetails?.holdsData) return {};
+
+    // Calculate center of board
+    const centerX = (boardDetails.edge_left + boardDetails.edge_right) / 2;
+    const centerY = (boardDetails.edge_top + boardDetails.edge_bottom) / 2;
+
+    // Current sweep angle (0-360), advances each frame
+    const sweepAngle = (animationFrame * 7.2) % 360; // Full rotation over 50 frames
+    const sweepWidth = 60; // 60 degree sweep arc
+
+    const holdsMap: LitUpHoldsMap = {};
+    // Use theme colors for the animation - primary, secondary, and success for variety
+    const colors = [themeTokens.colors.primary, themeTokens.colors.secondary, themeTokens.colors.success];
+
+    for (const hold of boardDetails.holdsData) {
+      // Calculate angle from center (in degrees, 0-360)
+      let angle = Math.atan2(hold.cy - centerY, hold.cx - centerX) * (180 / Math.PI);
+      angle = (angle + 360) % 360; // Normalize to 0-360
+
+      // Check if hold is within the sweep arc
+      const diff = Math.abs(angle - sweepAngle);
+      const withinSweep = diff < sweepWidth / 2 || diff > 360 - sweepWidth / 2;
+
+      if (withinSweep) {
+        // Color based on distance from sweep center for gradient effect
+        const normalizedDiff = Math.min(diff, 360 - diff) / (sweepWidth / 2);
+        const colorIndex = Math.floor(normalizedDiff * 3);
+
+        holdsMap[hold.id] = {
+          state: 'HAND',
+          color: colors[colorIndex] || colors[0],
+          displayColor: colors[colorIndex] || colors[0],
+        };
+      }
+    }
+
+    return holdsMap;
+  }, [boardDetails, animationFrame]);
+
+  // Animation frame update for hold movement
+  useEffect(() => {
+    const animationInterval = setInterval(() => {
+      setAnimationFrame((prev) => (prev + 1) % 100);
+    }, 80); // Update every 80ms for faster rotation
+
+    return () => clearInterval(animationInterval);
+  }, []);
+
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <BoardRenderer litUpHoldsMap={animatedHoldsMap} mirrored={false} boardDetails={boardDetails} thumbnail={false} />
+    </div>
+  );
+};
+
+export default InlineBoardLoading;