Feature: Relation picker "loading more" state

  As an editor filling a relation field
  I want the picker to show that the next page is loading and to keep my place
  So that pressing "Load more" never loses focus or shows a blank list

  Background:
    Given the spec of record is docs/design/screens/schema-later.md group 7 states 2 and 3, and docs/design/change-log-roles-sync.md "Relation picker"
    And the picker is RelationField.vue over useRelationSearch.ts, which already requests GET /v1/content-type/{key}/entry?page=N&size=25 and has loading, loadingMore, hasMore and total
    And the sample is 25 venues loaded of 62 for "rue", footer "Showing 25 of 62" with "Load more"
    And the design marks the group "Later" but the picker exists in the app; this file specifies the missing state only
    And the number of skeleton rows is read from the board frame SchemaFrame.dc.html, not fixed here
    And the SPA lives in web/src, Nuxt UI only, design tokens only, EN and FR in i18n/messages.ts, no comments in code

  Rule: Loading more

    Scenario: Pressing Load more
      Given 25 of 62 results are listed for "rue"
      When "Load more" is pressed
      Then GET /v1/content-type/venues/entry?page=2&size=25 is sent
      And skeleton rows follow the last loaded result
      And the button reads "Loading…" with a loader and is disabled
      And the footer still reads "Showing 25 of 62" and the loaded results stay in place
      And a second press while loading sends no request

    Scenario: The page arrives
      When the page answers 25 more items
      Then the skeleton rows are replaced by the new results, the footer reads "Showing 50 of 62", the button returns to "Load more" and is enabled
      And focus moves to the first new row

    Scenario: The last page
      Given 12 items remain
      When the page arrives
      Then the footer reads "Showing 62 of 62" and the button is gone

    Scenario: The next page fails
      When the request answers 500 or the network fails
      Then the skeleton rows disappear, the loaded results stay, the button is enabled again with its label "Load more"
      And focus returns to the button
      And the existing error treatment of the picker is unchanged (design gap G2)

    Scenario: A new search while loading more
      When the person types a new term
      Then the pending page is ignored, the skeleton of the first page shows as for any search, and the footer follows the new total

    Scenario: Focus handling
      Given the keyboard user pressed Load more with Enter
      Then focus stays on the button while loading and moves to the first new row when the page arrives
      And a screen reader hears "Loading…" and then the new count, announced politely

    Scenario: Reduced motion
      Given prefers-reduced-motion is set
      Then the skeleton rows do not animate

    Scenario: Mobile
      Given a 390 px viewport
      Then the skeleton rows and the button are full width with 44 px targets