<DesignBoard title="Skeleton loader canvas" version={2}>
<Section id="section-loader" title="Plan-mode loading state" subtitle="Primary mockup lives in the canvas. The artboard itself is only boxes, bars, and icon-sized placeholders.">
<Artboard id="frame-target-skeleton" label="Target: plan-shaped skeleton" surface="desktop" x={120} y={110} width={980} height={620} order={1}>
<Screen surface="desktop" caption="Textless skeleton-loader mockup on the plan canvas.">
  <FrameScreen>
    <Col full>
      <Box dashed>
        <Row>
          <IconSquare active />
          <IconSquare />
          <IconSquare />
          <IconSquare />
          <IconSquare />
        </Row>
        <Row full>
          <Box>
            <Lines n={1} widths={[
  32
]} />
            <Lines n={2} widths={[
  92,
  74
]} />
            <Row>
              <IconSquare active />
              <IconSquare />
              <IconSquare />
              <IconSquare />
            </Row>
            <Divider />
            <Lines n={4} widths={[
  86,
  72,
  80,
  62
]} />
          </Box>
          <Box>
            <StatusBar />
            <Lines n={5} widths={[
  42,
  88,
  70,
  82,
  56
]} />
          </Box>
          <Box>
            <StatusBar />
            <Lines n={5} widths={[
  48,
  80,
  64,
  76,
  58
]} />
          </Box>
        </Row>
        <Row>
          <IconSquare />
          <Lines n={1} widths={[
  18
]} />
          <IconSquare />
        </Row>
      </Box>
      <Divider />
      <Main>
        <Lines n={1} widths={[
  16
]} />
        <Lines n={1} widths={[
  58
]} />
        <Lines n={2} widths={[
  72,
  54
]} />
        <Divider />
        <Lines n={4} widths={[
  24,
  82,
  76,
  64
]} />
        <Divider />
        <Row>
          <Box>
            <Lines n={2} widths={[
  80,
  56
]} />
          </Box>
          <Box>
            <Lines n={2} widths={[
  72,
  62
]} />
          </Box>
          <Box>
            <Lines n={2} widths={[
  76,
  48
]} />
          </Box>
        </Row>
      </Main>
    </Col>
  </FrameScreen>
</Screen>
</Artboard>
</Section>

<Annotation id="ann-textless-loader" title="Textless loader" targetId="frame-target-skeleton" placement="right">

Inside the loader: placeholder geometry only. No fake labels, prose, button text, titles, or copied plan content.

</Annotation>

<Annotation id="ann-renderer-gap" title="Canvas renderer gap" targetId="frame-target-skeleton" placement="bottom">

The current canvas kit can show structure, but not CSS-level shimmer, grid color, radii, or exact surface tokens. The right fix is richer canvas artboards, not moving the mockup into document HTML.

</Annotation>
</DesignBoard>
