fix: Improve loading experience with proper page-ready signaling

packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { PropsWithChildren } from 'react';
 import { Affix, Layout } from 'antd';
 import { ParsedBoardRouteParameters, BoardRouteParameters, BoardDetails } from '@/app/lib/types';
@@ -14,6 +14,7 @@ import { ConnectionSettingsProvider } from '@/app/components/connection-manager/
 import { PartyProvider } from '@/app/components/party-manager/party-context';
 import PartyProfileWrapper from '@/app/components/party-manager/party-profile-wrapper';
 import { Metadata } from 'next';
+import BoardPageSkeleton from '@/app/components/board-page/board-page-skeleton';
 
 /**
  * Generates a user-friendly page title from board details.
@@ -128,8 +129,8 @@ export default async function BoardLayout(props: PropsWithChildren<BoardLayoutPr
 
   const { board_name, angle } = parsedParams;
 
-  // Fetch the climbs and board details server-side
-  const [boardDetails] = await Promise.all([getBoardDetails(parsedParams)]);
+  // Fetch the board details server-side
+  const boardDetails = await getBoardDetails(parsedParams);
 
   return (
     <Layout style={{ height: '100dvh', display: 'flex', flexDirection: 'column', padding: 0 }}>
@@ -152,7 +153,9 @@ export default async function BoardLayout(props: PropsWithChildren<BoardLayoutPr
                 paddingRight: '10px',
               }}
             >
-              {children}
+              <Suspense fallback={<BoardPageSkeleton />}>
+                {children}
+              </Suspense>
             </Content>
 
             <Affix offsetBottom={0}>

packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx

@@ -11,6 +11,7 @@ import { parseBoardRouteParamsWithSlugs } from '@/app/lib/url-utils.server';
 import ClimbsList from '@/app/components/board-page/climbs-list';
 import { searchClimbs } from '@/app/lib/db/queries/climbs/search-climbs';
 import { getBoardDetails } from '@/app/lib/data/queries';
+import PageReadySignal from '@/app/components/loading/page-ready-signal';
 
 export default async function DynamicResultsPage(props: {
   params: Promise<BoardRouteParametersWithUuid>;
@@ -86,6 +87,7 @@ export default async function DynamicResultsPage(props: {
   return (
     <>
       <ClimbsList {...parsedParams} boardDetails={boardDetails} initialClimbs={fetchedResults.climbs} />
+      <PageReadySignal />
     </>
   );
 }

packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/view/[climb_uuid]/page.tsx

@@ -22,6 +22,7 @@ import { kilterBetaLinks, tensionBetaLinks } from '@/app/lib/db/schema';
 import { eq } from 'drizzle-orm';
 import { BetaLink } from '@/app/lib/api-wrappers/sync-api-types';
 import styles from './climb-view.module.css';
+import PageReadySignal from '@/app/components/loading/page-ready-signal';
 
 export async function generateMetadata(props: { params: Promise<BoardRouteParametersWithUuid> }): Promise<Metadata> {
   const params = await props.params;
@@ -101,7 +102,7 @@ export default async function DynamicResultsPage(props: { params: Promise<BoardR
 
     if (hasNumericParams || isUuidOnly(params.climb_uuid)) {
       // Need to redirect to new slug-based URL
-      const [currentClimb] = await Promise.all([getClimb(parsedParams)]);
+      const currentClimb = await getClimb(parsedParams);
 
       // Get the names for slug generation
       const layouts = await import('@/app/lib/data/queries').then((m) => m.getLayouts(parsedParams.board_name));
@@ -191,27 +192,30 @@ export default async function DynamicResultsPage(props: { params: Promise<BoardR
     );
 
     return (
-      <div className={styles.pageContainer}>
-        {/* Actions Section */}
-        <div className={styles.actionsSection}>
-          <ClimbViewActions
-            climb={climbWithProcessedData}
-            boardDetails={boardDetails}
-            auroraAppUrl={auroraAppUrl}
-            angle={parsedParams.angle}
-          />
-        </div>
-
-        {/* Main Content */}
-        <div className={styles.contentWrapper}>
-          <div className={styles.climbSection}>
-            <ClimbCard climb={climbWithProcessedData} boardDetails={boardDetails} actions={[]} />
+      <>
+        <div className={styles.pageContainer}>
+          {/* Actions Section */}
+          <div className={styles.actionsSection}>
+            <ClimbViewActions
+              climb={climbWithProcessedData}
+              boardDetails={boardDetails}
+              auroraAppUrl={auroraAppUrl}
+              angle={parsedParams.angle}
+            />
           </div>
-          <div className={styles.betaSection}>
-            <BetaVideos betaLinks={betaLinks} />
+
+          {/* Main Content */}
+          <div className={styles.contentWrapper}>
+            <div className={styles.climbSection}>
+              <ClimbCard climb={climbWithProcessedData} boardDetails={boardDetails} actions={[]} />
+            </div>
+            <div className={styles.betaSection}>
+              <BetaVideos betaLinks={betaLinks} />
+            </div>
           </div>
         </div>
-      </div>
+        <PageReadySignal />
+      </>
     );
   } catch (error) {
     console.error('Error fetching results or climb:', error);

packages/web/app/components/board-page/board-page-skeleton.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import React from 'react';
+import Row from 'antd/es/row';
+import Col from 'antd/es/col';
+import Flex from 'antd/es/flex';
+import Card from 'antd/es/card';
+import Skeleton from 'antd/es/skeleton';
+import { InfoCircleOutlined, ForkOutlined, HeartOutlined, PlusCircleOutlined } from '@ant-design/icons';
+import { themeTokens } from '@/app/theme/theme-config';
+
+/**
+ * Skeleton that mimics the ClimbCard title structure (horizontal layout with V grade)
+ */
+const ClimbCardTitleSkeleton = () => (
+  <Flex gap={12} align="center">
+    {/* Left side: Name and info stacked */}
+    <Flex vertical gap={4} style={{ flex: 1, minWidth: 0 }}>
+      <Skeleton.Input active size="small" style={{ width: '60%', minWidth: 80 }} />
+      <Skeleton.Input active size="small" style={{ width: '80%', minWidth: 100, height: 14 }} />
+    </Flex>
+    {/* Right side: V grade placeholder */}
+    <Skeleton.Avatar active shape="square" size={32} />
+  </Flex>
+);
+
+/**
+ * Skeleton that mimics the BoardRenderer - placeholder for the board image.
+ * Uses minHeight to approximate the actual BoardRenderer which has maxHeight: 55vh.
+ */
+const BoardRendererSkeleton = () => (
+  <Skeleton.Node
+    active
+    style={{
+      width: '100%',
+      minHeight: '40vh',
+      aspectRatio: '1 / 1.1',
+    }}
+  >
+    <span />
+  </Skeleton.Node>
+);
+
+/**
+ * Skeleton loading UI for ClimbCard, matching the card structure with muted action icons.
+ */
+const ClimbCardSkeleton = () => (
+  <Card
+    size="small"
+    style={{
+      backgroundColor: themeTokens.semantic.surface,
+    }}
+    styles={{
+      header: { paddingTop: 8, paddingBottom: 6 },
+      body: { padding: 6 },
+    }}
+    title={<ClimbCardTitleSkeleton />}
+    actions={[
+      <InfoCircleOutlined key="info" style={{ color: 'var(--ant-color-text-quaternary)' }} />,
+      <ForkOutlined key="fork" style={{ color: 'var(--ant-color-text-quaternary)' }} />,
+      <HeartOutlined key="heart" style={{ color: 'var(--ant-color-text-quaternary)' }} />,
+      <PlusCircleOutlined key="plus" style={{ color: 'var(--ant-color-text-quaternary)' }} />,
+    ]}
+  >
+    <BoardRendererSkeleton />
+  </Card>
+);
+
+/**
+ * Skeleton loading UI for the board page, matching the ClimbsList grid layout.
+ */
+const BoardPageSkeleton = () => {
+  return (
+    <Row gutter={[8, 8]}>
+      {Array.from({ length: 10 }, (_, i) => (
+        <Col xs={24} lg={12} xl={12} key={i}>
+          <ClimbCardSkeleton />
+        </Col>
+      ))}
+    </Row>
+  );
+};
+
+export default BoardPageSkeleton;

packages/web/app/components/board-renderer/board-litup-holds.tsx

@@ -9,49 +9,75 @@ interface BoardLitupHoldsProps {
   onHoldClick?: (holdId: number) => void;
 }
 
-const BoardLitupHolds: React.FC<BoardLitupHoldsProps> = ({
-  holdsData,
-  litUpHoldsMap,
-  mirrored,
-  thumbnail,
-  onHoldClick,
-}) => {
-  if (!holdsData) return null;
-
-  return (
-    <>
-      {holdsData.map((hold) => {
-        const isLitUp = litUpHoldsMap[hold.id]?.state && litUpHoldsMap[hold.id].state !== 'OFF';
-        const color = isLitUp ? litUpHoldsMap[hold.id].color : 'transparent';
-
-        let renderHold = hold;
-        if (mirrored && hold.mirroredHoldId) {
-          const mirroredHold = holdsData.find(({ id }) => id === hold.mirroredHoldId);
-          if (!mirroredHold) {
-            throw new Error("Couldn't find mirrored hold");
-          }
-          renderHold = mirroredHold;
-        }
-
-        return (
-          <circle
-            key={renderHold.id}
-            id={`hold-${renderHold.id}`}
-            data-mirror-id={renderHold.mirroredHoldId || undefined}
-            cx={renderHold.cx}
-            cy={renderHold.cy}
-            r={renderHold.r}
-            stroke={color}
-            strokeWidth={thumbnail ? 8 : 6}
-            fillOpacity={thumbnail ? 1 : 0}
-            fill={thumbnail ? color : undefined}
-            style={{ cursor: onHoldClick ? 'pointer' : 'default' }}
-            onClick={onHoldClick ? () => onHoldClick(renderHold.id) : undefined}
-          />
-        );
-      })}
-    </>
-  );
+const areLitUpHoldsMapsEqual = (prev: LitUpHoldsMap, next: LitUpHoldsMap): boolean => {
+  const prevKeys = Object.keys(prev);
+  const nextKeys = Object.keys(next);
+
+  if (prevKeys.length !== nextKeys.length) return false;
+
+  for (const key of prevKeys) {
+    const numKey = Number(key);
+    const prevHold = prev[numKey];
+    const nextHold = next[numKey];
+    if (!nextHold) return false;
+    if (prevHold.state !== nextHold.state || prevHold.color !== nextHold.color) {
+      return false;
+    }
+  }
+
+  return true;
 };
 
+const BoardLitupHolds = React.memo(
+  ({ holdsData, litUpHoldsMap, mirrored, thumbnail, onHoldClick }: BoardLitupHoldsProps) => {
+    if (!holdsData) return null;
+
+    return (
+      <>
+        {holdsData.map((hold) => {
+          const isLitUp = litUpHoldsMap[hold.id]?.state && litUpHoldsMap[hold.id].state !== 'OFF';
+          const color = isLitUp ? litUpHoldsMap[hold.id].color : 'transparent';
+
+          let renderHold = hold;
+          if (mirrored && hold.mirroredHoldId) {
+            const mirroredHold = holdsData.find(({ id }) => id === hold.mirroredHoldId);
+            if (!mirroredHold) {
+              throw new Error("Couldn't find mirrored hold");
+            }
+            renderHold = mirroredHold;
+          }
+
+          return (
+            <circle
+              key={renderHold.id}
+              id={`hold-${renderHold.id}`}
+              data-mirror-id={renderHold.mirroredHoldId || undefined}
+              cx={renderHold.cx}
+              cy={renderHold.cy}
+              r={renderHold.r}
+              stroke={color}
+              strokeWidth={thumbnail ? 8 : 6}
+              fillOpacity={thumbnail ? 1 : 0}
+              fill={thumbnail ? color : undefined}
+              style={{ cursor: onHoldClick ? 'pointer' : 'default' }}
+              onClick={onHoldClick ? () => onHoldClick(renderHold.id) : undefined}
+            />
+          );
+        })}
+      </>
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.holdsData === nextProps.holdsData &&
+      prevProps.mirrored === nextProps.mirrored &&
+      prevProps.thumbnail === nextProps.thumbnail &&
+      prevProps.onHoldClick === nextProps.onHoldClick &&
+      areLitUpHoldsMapsEqual(prevProps.litUpHoldsMap, nextProps.litUpHoldsMap)
+    );
+  },
+);
+
+BoardLitupHolds.displayName = 'BoardLitupHolds';
+
 export default BoardLitupHolds;

packages/web/app/components/board-renderer/board-renderer.tsx

@@ -12,33 +12,37 @@ export type BoardProps = {
   onHoldClick?: (holdId: number) => void;
 };
 
-const BoardRenderer = ({ boardDetails, thumbnail, litUpHoldsMap, mirrored, onHoldClick }: BoardProps) => {
-  const { boardWidth, boardHeight, holdsData } = boardDetails;
+const BoardRenderer = React.memo(
+  ({ boardDetails, thumbnail, litUpHoldsMap, mirrored, onHoldClick }: BoardProps) => {
+    const { boardWidth, boardHeight, holdsData } = boardDetails;
 
-  return (
-    <svg
-      viewBox={`0 0 ${boardWidth} ${boardHeight}`}
-      preserveAspectRatio="xMidYMid meet" // Ensures aspect ratio is maintained
-      style={{
-        width: '100%',
-        height: 'auto',
-        display: 'block',
-        maxHeight: thumbnail ? '10vh' : '55vh', // TODO: Find better size
-      }} // Ensures scaling
-    >
-      {Object.keys(boardDetails.images_to_holds).map((imageUrl) => (
-        <image key={imageUrl} href={getImageUrl(imageUrl, boardDetails.board_name)} width="100%" height="100%" />
-      ))}
-      {litUpHoldsMap && (
-        <BoardLitupHolds
-          onHoldClick={onHoldClick}
-          holdsData={holdsData}
-          litUpHoldsMap={litUpHoldsMap}
-          mirrored={mirrored}
-        />
-      )}
-    </svg>
-  );
-};
+    return (
+      <svg
+        viewBox={`0 0 ${boardWidth} ${boardHeight}`}
+        preserveAspectRatio="xMidYMid meet"
+        style={{
+          width: '100%',
+          height: 'auto',
+          display: 'block',
+          maxHeight: thumbnail ? '10vh' : '55vh',
+        }}
+      >
+        {Object.keys(boardDetails.images_to_holds).map((imageUrl) => (
+          <image key={imageUrl} href={getImageUrl(imageUrl, boardDetails.board_name)} width="100%" height="100%" />
+        ))}
+        {litUpHoldsMap && (
+          <BoardLitupHolds
+            onHoldClick={onHoldClick}
+            holdsData={holdsData}
+            litUpHoldsMap={litUpHoldsMap}
+            mirrored={mirrored}
+          />
+        )}
+      </svg>
+    );
+  },
+);
+
+BoardRenderer.displayName = 'BoardRenderer';
 
 export default BoardRenderer;