@autobusal/routes-order 1.37.8 → 1.37.9

package/Availability/Availability.tsx

@@ -17,8 +17,15 @@ interface Props {
  *
  * A week: enough that somebody asking "is there a bus this weekend" never
  * has to expand anything, few enough that the page still ends.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * Exported now: ./Skeleton reserves height for exactly this many day-blocks,
+ * not all thirty, because days 8-30 sit inside the closed <details> below
+ * and reserve nothing themselves. One number, so the skeleton and the real
+ * table can never disagree about how many days are "above the fold".
  */
-const VISIBLE = 7;
+export const VISIBLE = 7;
 
 /**
  * Real departures on real dates, for the next thirty days.

package/Availability/Skeleton.tsx

@@ -0,0 +1,119 @@
+import { TFunction } from 'i18next';
+import { Bone } from '../styles';
+import { Container, Heading, Lead, Wrap, Table } from './styles';
+import { VISIBLE } from './Availability';
+
+interface Props {
+  id: string
+  // Real city names where they are already known - see the call site in
+  // ../Sections/Sections, which has them from the SAME facts query this
+  // section's own heading is built from once it answers. Undefined only
+  // for the instant before that, in which case the heading is a bar rather
+  // than a guess at English words in the middle of another language.
+  from?: string
+  to?: string
+  t: TFunction<'common'>
+}
+
+const COLUMNS = 6;
+
+/**
+ * How many rows a day's placeholder reserves.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * Not knowable before the fetch answers - a quiet rural pair might run once
+ * a day, a trunk route ten times (see TRIPS in ./Schema, measured on
+ * Tirana-Thessaloniki). Three is not a guess pulled from nowhere: three rows
+ * across the seven VISIBLE days is twenty-one, and at this table's real
+ * padding and line-height that comes to almost exactly the ~1,290px,
+ * ~20-row block that was actually measured on production - see the
+ * height math this number produces below, which is what earns it the name
+ * "defensible" rather than "round". Under-reserving still shifts the page
+ * when the real rows land; over-reserving by a lot wastes screen before
+ * anyone has asked for anything - three is the number that keeps both
+ * errors small.
+ */
+const ROWS_PER_DAY = 3;
+
+const day = (index: number): JSX.Element => (
+  <tbody key={ index }>
+    <tr>
+      <th colSpan={ COLUMNS } scope="colgroup">
+        <Bone $width={ 35 } $height={ 16 } />
+      </th>
+    </tr>
+
+    { Array.from({ length: ROWS_PER_DAY }, (_, row) => (
+      <tr key={ row }>
+        <td><Bone $width={ 70 } /></td>
+        <td><Bone $width={ 70 } /></td>
+        <td><Bone $width={ 60 } /></td>
+        <td><Bone $width={ 80 } /></td>
+        <td><Bone $width={ 55 } /></td>
+        <td><Bone $width={ 60 } /></td>
+      </tr>
+    )) }
+  </tbody>
+);
+
+/**
+ * What the section looks like before /api/routes/search/availability
+ * answers.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * WHY THIS EXISTS. This section used to render nothing at all while the
+ * fetch was in flight (~1.2-1.4s) and then drop a ~1,290px block in all at
+ * once - measured CLS of 0.5172-1.1646 on pair pages, against a homepage
+ * (which has no such block) of 0.0000. The fix is not to load faster, it is
+ * to occupy the space from the FIRST paint, in the shape the real content
+ * will take, so the swap moves nothing.
+ *
+ * SAME BOXES, PLACEHOLDER CONTENT. This reuses Availability's own Container,
+ * Heading, Lead, Wrap and Table rather than a hand-measured approximation of
+ * them, so the two can never quietly drift apart - a padding change in
+ * ./styles resizes both at once. Only the day count (VISIBLE, imported
+ * rather than repeated) and the row count (ROWS_PER_DAY, above) are guesses;
+ * everything else is the real box model.
+ *
+ * aria-hidden, and no live region: a placeholder table announces nothing,
+ * because it has nothing to announce - the section's actual content is
+ * either the real table that replaces this, a few seconds later, or nothing
+ * at all.
+ */
+const AvailabilitySkeleton = ({ id, from, to, t }: Props): JSX.Element => (
+  <Container id={ id } className="box" aria-hidden="true">
+    <Heading>
+      { from && to
+        ? t('routes_order.availability.title', { from, to })
+        : <Bone $width={ 45 } $height={ 22 } /> }
+    </Heading>
+
+    { /* Not data-dependent - the same translation the real Lead prints,
+         so this line never has to move when the real table lands. */ }
+    <Lead>{ t('routes_order.availability.lead') }</Lead>
+
+    <Wrap>
+      <Table>
+        <thead>
+          <tr>
+            { /* Real column headers, not placeholders - like the lead
+                 above, these come from static translations rather than
+                 from the fetch, so there is no reason to guess at them. */ }
+            <th>{ t('routes_order.schedule.departure') }</th>
+            <th>{ t('routes_order.schedule.arrival') }</th>
+            <th>{ t('routes_order.schedule.duration') }</th>
+            <th>{ t('routes_order.schedule.operator') }</th>
+            <th>{ t('routes_order.availability.price') }</th>
+            <th>{ t('routes_order.availability.book') }</th>
+          </tr>
+        </thead>
+
+        { Array.from({ length: VISIBLE }, (_, index) => day(index)) }
+      </Table>
+    </Wrap>
+  </Container>
+);
+
+export default AvailabilitySkeleton;

package/Availability/styles.ts

@@ -185,7 +185,8 @@ export const Price = styled.strong`
  * until a customer did.
  */
 export const SeatsLeft = styled.span<{ $low: boolean }>`
-  font-size: ${ props => props.theme.size.xxs };
+  // Claude - 2026-09-16 (audit): xs - the xxs was 10px, under the phone floor
+  font-size: ${ props => props.theme.size.xs };
   line-height: 1.25;
   white-space: nowrap;
   font-weight: ${ props => (props.$low ? 700 : 400) };

package/Found/Filters/styles.ts

@@ -45,15 +45,28 @@ export const Toggle = styled.button<{ $open: boolean }>`
   z-index: 900;
 
   /*
-   * Clear of the home indicator on a notched phone. env() resolves to 0 on
-   * everything that has no inset, so the fallback is simply the base value.
+   * Clear of the home indicator on a notched phone, AND clear of the
+   * cookie notice on a narrow one.
+   *
+   * Edited: Claude - Date: 2026-09-16
+   *
+   * --obt-cookie-notice-height is published by CookieNotification
+   * (packages/common) while its own bar sits fixed to this same edge under
+   * 640px - see NOTICE_HEIGHT_VAR there. Two elements anchored to the same
+   * "bottom: 0" both being fixed to the viewport does not resolve itself by
+   * z-index, which only decides which one paints on top of the other; this
+   * button was measured sitting directly under the notice at 375px. The
+   * variable defaults to 0px, so a page without the notice - or a visitor
+   * who has already dismissed it - sees no change at all.
    */
-  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
+  bottom: calc(20px + env(safe-area-inset-bottom, 0px) + var(--obt-cookie-notice-height, 0px));
 
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 9px 16px;
+  // Claude - 2026-09-16 (audit): the 44px tap minimum - this measured 35px
+  min-height: 44px;
   font-size: ${ props => props.theme.size.xs };
   font-weight: 700;
   border-radius: 100px;

package/Found/Orders/Orders.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
-import { Inline } from '@autobusal/common';
 import Route from '../Route/Route';
 import Empty from '../Empty/Empty';
+import Skeleton from './Skeleton';
 import { getFavorites, getNormal } from './utilities';
 import { sortItems, SortKey } from '../refine';
 import { Container, ContainerNotFound, Reset } from './styles';
@@ -27,12 +27,16 @@ interface Props {
 }
 
 const Orders = ({ loading, data, empty, refined, sort, type, passengers, preferredStop, step1, alternatives, alternativesLoading, t, onReset, onSave }: Props): JSX.Element => {
+  /*
+   * Edited: Claude - Date: 2026-09-16
+   *
+   * A skeleton the shape of the real list, not a one-line message - see
+   * ./Skeleton for why (measured on a dated results URL, which is never
+   * prerendered: 0.6868-1.1646 CLS from a page that renders almost nothing
+   * until the search answers, then drops every card in at once).
+   */
   if (loading) {
-    return (
-      <div className="box">
-        <Inline text={ t('routes_order.step2.loading.routes') } />
-      </div>
-    );
+    return <Skeleton t={ t } />;
   }
 
   // Edited: Ferjolt Ozuni - Date: 2026-08-01

package/Found/Orders/Skeleton.tsx

@@ -0,0 +1,102 @@
+import { TFunction } from 'i18next';
+import { Bone } from '../../styles';
+import { Container as Card, Trip, Company, Location, Time, Price, Amount } from '../Route/styles';
+import { Container } from './styles';
+
+/**
+ * How many placeholder cards to reserve room for.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * Not knowable before the search answers - see ROWS_PER_DAY in
+ * ../../Availability/Skeleton for the same problem one section over. Five
+ * is the same kind of middle estimate: enough to fill roughly one screen on
+ * a desktop, which is where a reserved-but-empty block would otherwise be
+ * most visible, and not so many that a route with genuinely few departures
+ * reserves a page and a half of blank cards. A result count either side of
+ * five is a residual shift of one card's height, not the ~20-card collapse
+ * this exists to prevent.
+ */
+const CARDS = 5;
+
+/**
+ * One placeholder card, in the shape Route/Route.tsx renders.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * SAME STYLED COMPONENTS AS THE REAL CARD - Card, Trip, Company, Location,
+ * Time, Price, Amount all come from ../Route/styles, not a redrawn
+ * approximation of them. That is what keeps this accurate as the card
+ * itself changes: a padding or gap edited there resizes the skeleton at the
+ * same time, rather than the two silently drifting apart.
+ *
+ * The three bars inside Price carry the REAL card's own class names
+ * (price-notice, details-toggle, seats-left) so the same nth-child/class
+ * ordering rules in Price's CSS lay them out exactly as they lay out the
+ * real amount, tax note, button, details toggle and seat count - including
+ * the extra rows those last two add on a phone, which is most of what made
+ * the old three-line estimate come up short.
+ */
+const SkeletonCard = (): JSX.Element => (
+  <Card className="box" $type="normal" aria-hidden="true">
+    <Trip>
+      <Company>
+        <Bone $width={ 45 } $height={ 28 } />
+        <Bone $width={ 60 } $height={ 14 } />
+      </Company>
+
+      <Location $side="from">
+        <Bone $width={ 75 } $height={ 17 } />
+        <Bone $width={ 90 } $height={ 15 } />
+      </Location>
+
+      <Time>
+        <Bone $width={ 40 } $height={ 30 } />
+      </Time>
+
+      <Location $side="to">
+        <Bone $width={ 75 } $height={ 17 } />
+        <Bone $width={ 90 } $height={ 15 } />
+      </Location>
+
+      <Price>
+        <Amount><Bone $width={ 60 } $height={ 26 } /></Amount>
+        <Bone $width={ 100 } $height={ 44 } />
+        <Bone className="price-notice" $width={ 85 } $height={ 14 } />
+        <Bone className="details-toggle" $width={ 55 } $height={ 16 } />
+        <Bone className="seats-left" $width={ 65 } $height={ 14 } />
+      </Price>
+    </Trip>
+  </Card>
+);
+
+interface Props {
+  t: TFunction<'common'>
+}
+
+/**
+ * What the results list looks like before a search answers.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * WHY THIS EXISTS. A dated results URL (?departure=...) is never
+ * prerendered - it serves the SPA shell, so the very first thing a visitor
+ * sees is whatever this component renders while `loading` is true. That
+ * used to be a single line of text ("Searching for tickets..."), which
+ * collapsed the whole page to almost nothing and then dropped every result
+ * card in at once the moment the search answered - the same shape of CLS
+ * bug as ../../Availability/Skeleton, on a page that cannot be prerendered
+ * around it.
+ *
+ * `role="status"` with the SAME loading string the old text used, rather
+ * than a live region per card: a screen reader is told once that results
+ * are loading, not read five identical placeholder cards. The cards
+ * themselves are aria-hidden - there is nothing in them to announce.
+ */
+const Skeleton = ({ t }: Props): JSX.Element => (
+  <Container role="status" aria-label={ t('routes_order.step2.loading.routes') }>
+    { Array.from({ length: CARDS }, (_, index) => <SkeletonCard key={ index } />) }
+  </Container>
+);
+
+export default Skeleton;

package/Found/Sort/styles.ts

@@ -94,7 +94,12 @@ export const Option = styled.button<{ $active: boolean }>`
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 5px 2px;
-  font-size: calc(${ props => props.theme.size.xs } - 2px);
+  // Claude - 2026-09-16 (audit): xs, not xs minus 2 - that was 10px, under
+  // the phone floor. (These pills are only ever painted at 640px and up -
+  // see Options in ./Sort.tsx - but the rule cascades to the hidden phone
+  // copy of every one of them regardless, and a text-size audit reads
+  // computed style, not display.)
+  font-size: ${ props => props.theme.size.xs };
   font-weight: 700;
   white-space: nowrap;
 

package/Sections/Sections.tsx

@@ -2,6 +2,7 @@ import { TFunction } from 'i18next';
 import Facts from '../Facts/Facts';
 import Faq from '../Faq/Faq';
 import Availability from '../Availability/Availability';
+import AvailabilitySkeleton from '../Availability/Skeleton';
 import AvailabilitySchema from '../Availability/Schema';
 import Schedule from '../Schedule/Schedule';
 import Links from '../Links/Links';
@@ -60,7 +61,12 @@ const LINKS = 'links';
 const Sections = ({ from, to, heading, t }: Props): (JSX.Element | null) => {
   const { data } = useGetFacts(from, to);
 
-  const { data: dates } = useGetAvailability(from, to);
+  // Edited: Claude - Date: 2026-09-16
+  // `isLoading`, not `isFetching`: this is the ONE state the skeleton below
+  // exists for - the first request, before anything has ever answered. A
+  // background refetch re-uses `dates` from cache while it runs, so it never
+  // sees this true and never swaps a real table back out for a placeholder.
+  const { data: dates, isLoading: datesLoading } = useGetAvailability(from, to);
 
   const facts = data?.facts;
 
@@ -180,11 +186,23 @@ const Sections = ({ from, to, heading, t }: Props): (JSX.Element | null) => {
            at all when the endpoint gives us nothing, which is also what
            happens on a pair that has stopped running: the notice in the
            facts block above has already said so, and thirty rows of "no
-           departures" underneath it would be a wall, not an answer. */ }
-      { availability && (
+           departures" underneath it would be a wall, not an answer.
+
+           Edited: Claude - Date: 2026-09-16
+           WHILE IT LOADS, a skeleton the same shape takes the space instead
+           of nothing - see Availability/Skeleton for why (measured CLS of
+           0.52-1.16 on this exact block). `datesLoading` is the only other
+           branch: a pair that answers with nothing goes straight from the
+           skeleton to rendering nothing at all, which is correct - there
+           was never a table to reserve room for. */ }
+      { availability ? (
         <Anchored>
           <Availability id={ AVAILABILITY } data={ availability } t={ t } />
         </Anchored>
+      ) : datesLoading && (
+        <Anchored>
+          <AvailabilitySkeleton id={ AVAILABILITY } from={ facts.from } to={ facts.to } t={ t } />
+        </Anchored>
       ) }
 
       <Anchored>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/routes-order",
-  "version": "1.37.8",
+  "version": "1.37.9",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts",

package/styles.ts

@@ -153,4 +153,41 @@ export const Listing = styled.div`
   // column wider than its share of the row
   flex: 1;
   min-width: 0;
+
+  /*
+   * Edited: Claude - Date: 2026-09-16
+   *
+   * Real room at the FOOT of the list, on a narrow screen, for whatever the
+   * cookie notice (packages/common/CookieNotification) is currently taking
+   * up down there - not the fixed "20px" the notice used to assume, since a
+   * fixed guess is wrong the moment the sentence wraps to a different number
+   * of lines in a longer language. --obt-cookie-notice-height is the
+   * notice's own measured height, published as a CSS custom property so
+   * this column never has to ask it directly; 0px when the notice is not
+   * showing, so a visitor who has already dismissed it loses nothing here.
+   */
+  @media (max-width: 639px) {
+    padding-bottom: var(--obt-cookie-notice-height, 0px);
+  }
+`;
+
+/**
+ * A placeholder block, sized as a fraction of its cell.
+ *
+ * Edited: Claude - Date: 2026-09-16
+ *
+ * Shared by the two loading skeletons on this page - Availability/Skeleton
+ * and Found/Orders/Skeleton - so the one thing they agree on (what a
+ * "nothing has arrived yet" rectangle looks like) is defined once rather
+ * than twice. A flat fill, not the shimmering-gradient kind: the whole job
+ * of a skeleton here is to hold the page still while data arrives, and an
+ * animated one is itself something moving on the page for the second or so
+ * it is visible.
+ */
+export const Bone = styled.span<{ $width: number, $height?: number }>`
+  display: inline-block;
+  width: ${ props => props.$width }%;
+  height: ${ props => props.$height ?? 14 }px;
+  border-radius: 4px;
+  background: ${ props => props.theme.background.neutral };
 `;