@hgdc/ui 0.69.1 → 0.71.0

package/README.md

@@ -136,7 +136,8 @@ Une seule barre latérale (ADR 0024) : organisation et bouton Réduire en haut,
 | `assistant-chat` | `<AssistantConversation><AssistantUserMessage>…</AssistantUserMessage><AssistantReply tools={chips} waiting={pending} actions={<AssistantActionCard title=… status="pending" onConfirm={…} onCancel={…} />}><Markdown>{text}</Markdown></AssistantReply></AssistantConversation>`, `<AssistantComposer value={v} onValueChange={setV} onSubmit={send} busy={busy} />`, `<AssistantExamples examples={…} onPick={setV} />` : le produit rend le Markdown |
 | `assistant-view` | `<AssistantView status={status} threads={threads} threadId={id} onThreadChange={setId} thread={thread} renderText={(t) => <Markdown>{t}</Markdown>} onSend={send} onConfirm={confirm} onCancel={cancel} />` : le panneau complet pour `AppShell` (`assistant.panel`), aux formes de `@hgdc/assistant/convex` ; `subject` (page ouverte), `request` (demande venue de la page), `labels` (vouvoiement)                                                   |
 | `family-loader`  | `<FamilyLoaderRoot>{children}</FamilyLoaderRoot>` une fois dans le `body` de la route racine : le seul H d'un chargement de page, fixe sur la zone de contenu de la coque, rendu par le serveur, calé sur l'horloge (même pixel et même phase d'une page et d'un produit à l'autre, ADR 0015). `<FamilyLoader size="lg" />` : le H en ligne (une boucle de 2 s, `transform` et `opacity`). Dans un bouton : `Spinner`                                   |
-| `page-pending`   | `createRouter({ routeTree, ...routerPendingDefaults })` (préchargement au survol, chargement après 50 ms, au moins 300 ms) ; `AppShell {...useRouterState({ select: shellNavigation, structuralSharing: true })}` : la zone de contenu se couvre dès qu'une navigation attend, la coque reste ; `PagePending` : marque la place d'une page qui attend, le H du document s'affiche                                                                       |
+| `page-pending`   | `createRouter({ routeTree, ...routerPendingDefaults })` (préchargement au survol, squelette après 1 s, au moins 500 ms, ADR 0025) ; `AppShell {...useRouterState({ select: shellNavigation, structuralSharing: true })}` : une navigation montre la barre de progression, l'ancienne page reste ; `PagePending variant="list"                                                                                                                           | "dashboard" | "form"` : dans la coque, le squelette de la page ; hors de la coque, le H du document |
+| `page-skeleton`  | `<PageSkeleton variant="dashboard" />` : la forme d'une page qui charge, calée sur `Page` (en-tête, colonne, espacement), pour que rien ne saute à l'arrivée                                                                                                                                                                                                                                                                                            |
 | `skeleton`       | `<Pending pending={isLoading} fallback={<TableSkeleton columns={3} />}>…</Pending>` : après 200 ms, tenu 400 ms au moins                                                                                                                                                                                                                                                                                                                                |
 
 ## Listes, journaux et retours

package/dist/app-shell.d.ts

@@ -79,16 +79,17 @@ export declare function AppShell({ product, organization, productRail: productRa
     children: ReactNode;
     /**
      * Clé de la page affichée (le chemin, `location.pathname`) : la zone de contenu devient une
-     * frontière `Suspense` neuve à chaque page, qui montre `PagePending` pendant qu'une page charge
-     * ses données dans ses composants (`useSuspenseQuery`), au lieu de garder l'ancienne page figée
-     * pendant la transition de la navigation. Sans clé, pas de frontière.
+     * frontière `Suspense` neuve à chaque page, qui montre le squelette de la page (`PagePending`)
+     * pendant qu'une page charge ses données dans ses composants (`useSuspenseQuery`). Sans clé, pas
+     * de frontière.
      */
     contentKey?: string | undefined;
     /**
      * Une navigation vers une autre page est en cours (TanStack Router :
      * `useRouterState({ select: (s) => s.isLoading && s.location.pathname !== s.resolvedLocation?.pathname })`).
-     * Au-delà de 50 ms, la zone de contenu se couvre du H centré, la coque restant en place : jamais
-     * l'ancienne page figée, quel que soit ce qui attend (session, loaders, code de la page).
+     * Au-delà de 150 ms, une fine barre de progression court sous la barre du haut ; l'ancienne page
+     * reste affichée jusqu'à ce que la nouvelle soit prête, ou que son squelette la remplace après 1 s
+     * (`routerPendingDefaults`, ADR 0025).
      */
     navigating?: boolean;
     /**

package/dist/app-shell.js

@@ -3,11 +3,11 @@ import Settings02Icon from "@hugeicons/core-free-icons/Settings02Icon";
 import { SIDEBAR_ITEM } from "./sidebar-nav.js";
 import Menu01Icon from "@hugeicons/core-free-icons/Menu01Icon";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { Suspense, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { Suspense, useContext, useEffect, useId, useRef, useState } from "react";
 import { CommandMenuButton } from "./command-menu.js";
 import { Drawer, DrawerContent, DrawerTitle } from "./drawer.js";
 import { FamilyLoaderHost, FamilyLoaderRootContext } from "./family-loader.js";
-import { CONTENT_LOADING_LAYER, ContentLoadingContext, PagePending } from "./page-pending.js";
+import { CONTENT_LOADING_LAYER, NAVIGATION_PROGRESS_MIN_MS, NAVIGATION_PROGRESS_MS, PagePending, ShellContentContext, useDelayedFlag, } from "./page-pending.js";
 import { ProductBadge } from "./product-badge.js";
 import { productBarShown, useProductBarPreference, useProductBarSync } from "./product-bar.js";
 import { ShellNavigation } from "./module-bar.js";
@@ -22,7 +22,7 @@ import { rememberLastProduct, rememberShellNavHeight } from "./shell-memory.js";
 import { ModuleBarShownContext, ShellLeaveContext, ShellMenuLinksContext, StatusPageContext, } from "./shell-placement.js";
 import { ShellOrganizationHead, SidebarHead } from "./sidebar-head.js";
 import { useToggleShortcut } from "./sidebar-rail.js";
-import { useContentLoading, useHydrated, useIsomorphicLayoutEffect } from "./use-content-loading.js";
+import { useHydrated, useIsomorphicLayoutEffect, useShellCover } from "./use-content-loading.js";
 import { useProductLeave } from "./use-product-leave.js";
 import { useMediaQuery } from "./use-media-query.js";
 export { sidebarInitScript, toggleSidebar, useSidebarRail } from "./sidebar-rail.js";
@@ -50,20 +50,12 @@ export function AppShell({ product, organization, productRail: productRailOption
     useToggleShortcut();
     // Relecture des organisations après un passage depuis la barre, préchargement des autres produits (ADR 0016).
     useProductSwitch(productRail);
-    // Chargement de la zone de contenu (ADR 0015) : une navigation en cours (après 50 ms), une page
-    // qui attend (`PagePending`, aussitôt : le routeur a déjà attendu), ou le départ vers un autre
-    // produit (aussitôt). Une fois montré, au moins 300 ms. Le H est celui du document, en position
-    // fixe : il ne bouge pas d'un état à l'autre et n'est jamais démonté.
-    const [pagePending, setPagePending] = useState(0);
-    const registerPagePending = useCallback(() => {
-        setPagePending((count) => count + 1);
-        return () => setPagePending((count) => count - 1);
-    }, []);
+    // Chargement (ADR 0025) : une navigation dans le module montre la barre de progression, l'ancienne
+    // page restant à l'écran ; seul le départ vers un autre module couvre la zone de contenu du H.
     const { leaving, leave } = useProductLeave();
+    const progress = useDelayedFlag(navigating, NAVIGATION_PROGRESS_MS, NAVIGATION_PROGRESS_MIN_MS);
     const statusPageUrl = statusPage === false ? null : (statusPage ?? statusPageUrlFor(product));
-    const loading = useContentLoading({ navigating, pending: pagePending > 0 || leaving });
-    // Avant l'hydratation, le CSS montre le calque et le H dès qu'une page attend (`:has`) ; ensuite
-    // `data-loading` prend le relais dans la même image.
+    const loading = useShellCover(leaving);
     const hydrated = useHydrated();
     const hasRoot = useContext(FamilyLoaderRootContext);
     const contentRef = useRef(null);
@@ -111,5 +103,5 @@ export function AppShell({ product, organization, productRail: productRailOption
         }
         : {};
     const navigation = productRail ? (_jsx(ShellNavigation, { product: product, nav: nav, accountHref: accountHref, level: navLevel, onLevelChange: setNavLevel, projectModules: project?.modules })) : (nav);
-    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false), product }, children: _jsx(ModuleBarShownContext, { value: productRail, children: _jsx(ShellMenuLinksContext, { value: menuLinks, children: _jsx(ShellLeaveContext, { value: leave, children: _jsx(StatusPageContext, { value: statusPageUrl, children: _jsxs("div", { "data-slot": "app-shell", "data-module-bar": productRail ? "" : undefined, "data-loading": loading ? "" : undefined, "data-hydrated": hydrated ? "" : undefined, "data-assistant": assistantOpen ? "" : undefined, className: "min-h-dvh lg:grid lg:h-dvh lg:grid-cols-[auto_minmax(0,1fr)_auto] lg:bg-shell", children: [_jsx("a", { href: "#contenu", className: "sr-only z-50 rounded-xl bg-background px-4 py-2 text-sm font-medium focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:ring-2 focus:ring-ring", children: "Aller au contenu" }), _jsxs("aside", { ref: sidebarRef, "data-slot": "app-shell-sidebar", "aria-label": "Barre lat\u00E9rale", inert: pageBlocked || undefined, className: "group/sidebar hidden overflow-hidden text-shell-foreground transition-[width] duration-(--duration-base) ease-ios motion-reduce:transition-none lg:flex lg:w-64 lg:flex-col lg:rail:w-16", children: [productRail ? (_jsx(ShellOrganizationHead, { organization: organization })) : (_jsxs(_Fragment, { children: [_jsx(SidebarHead, { product: product }), organization ? _jsx("div", { className: "shrink-0 px-3 pb-1", children: organization }) : null] })), navigation, _jsx("div", { "data-slot": "app-shell-footer", className: "grid gap-0.5 px-3 pt-1 pb-3 empty:hidden", children: footer })] }), _jsx("div", { inert: pageBlocked || undefined, className: "flex min-h-dvh flex-col lg:min-h-0 lg:p-2 lg:pl-0", children: _jsxs("div", { ref: contentRef, className: "relative flex flex-1 flex-col lg:min-h-0 lg:overflow-y-auto lg:rounded-xl lg:bg-background lg:[scrollbar-gutter:stable]", children: [_jsxs("header", { "data-slot": "app-shell-header", className: "sticky top-[env(safe-area-inset-top,0px)] z-30 flex min-h-14 shrink-0 flex-wrap items-center gap-x-1 gap-y-1 border-b border-foreground/5 bg-background px-2 py-1.5 sm:px-4 lg:top-0", children: [_jsx("button", { type: "button", onClick: () => setMenuOpen(true), "aria-label": "Ouvrir le menu", className: "touch-target grid size-10 shrink-0 place-items-center rounded-xl text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 lg:hidden", children: _jsx(HugeiconsIcon, { icon: Menu01Icon, "aria-hidden": true, className: "size-5" }) }), _jsxs("div", { "data-slot": "app-shell-brand", className: "flex shrink-0 items-center gap-2 pr-1 lg:hidden", children: [_jsx(ProductBadge, { product: product, className: "size-6" }), _jsx("span", { className: "font-heading text-[0.9375rem] font-semibold", children: familyProductName(product) })] }), _jsx("div", { className: cn("flex min-w-0 items-center gap-2", header ? "flex-[1_1_7rem]" : "flex-1"), children: header }), onSearch ? (_jsx(CommandMenuButton, { onClick: onSearch, compact: "mobile", className: "shrink-0 lg:w-96 lg:max-w-none", ...(searchLabel !== undefined ? { label: searchLabel } : {}) })) : null, assistant ? (_jsx(AssistantButton, { assistant: assistant, panelId: assistantPanelId, buttonRef: assistantButtonRef })) : null] }), _jsx("div", { "data-slot": "app-shell-loading", "aria-hidden": !loading, className: CONTENT_LOADING_LAYER, children: loading ? (_jsx("span", { role: "status", className: "sr-only", children: "Chargement\u2026" })) : null }), _jsxs("main", { id: "contenu", tabIndex: -1, "aria-busy": loading ? true : undefined, inert: loading || undefined, className: cn("mx-auto w-full max-w-6xl flex-1 px-4 pt-6 pb-16 outline-none sm:px-6 lg:px-10 lg:pt-8", mainClassName), children: [_jsx(ServiceStatus, { pageUrl: statusPageUrl, className: "mb-6" }), _jsx(ContentLoadingContext, { value: registerPagePending, children: contentKey === undefined ? (children) : (_jsx(Suspense, { fallback: _jsx(PagePending, {}), children: children }, contentKey)) })] })] }) }), assistant && assistantMounted ? (_jsx(AssistantPanel, { assistant: assistant, panelId: assistantPanelId, wide: wide, openAtShellMount: assistantOpenAtMount, buttonRef: assistantButtonRef })) : null, hasRoot ? null : _jsx(FamilyLoaderHost, {}), _jsx(Drawer, { side: "bottom", open: menuOpen, onOpenChange: setMenuOpen, children: _jsxs(DrawerContent, { className: "lg:hidden", children: [_jsx(DrawerTitle, { className: "sr-only", children: "Menu" }), organization ? _jsx("div", { className: "px-3 pt-1", children: organization }) : null, navigation, _jsx("div", { className: "grid gap-0.5 border-t border-foreground/5 px-3 pt-2 pb-[max(env(safe-area-inset-bottom),0.75rem)] empty:hidden", children: footer })] }) })] }) }) }) }) }) }));
+    return (_jsx(ShellContext.Provider, { value: { closeMobileNav: () => setMenuOpen(false), product }, children: _jsx(ModuleBarShownContext, { value: productRail, children: _jsx(ShellMenuLinksContext, { value: menuLinks, children: _jsx(ShellLeaveContext, { value: leave, children: _jsx(StatusPageContext, { value: statusPageUrl, children: _jsxs("div", { "data-slot": "app-shell", "data-module-bar": productRail ? "" : undefined, "data-loading": loading ? "" : undefined, "data-navigating": progress ? "" : undefined, "data-hydrated": hydrated ? "" : undefined, "data-assistant": assistantOpen ? "" : undefined, className: "min-h-dvh lg:grid lg:h-dvh lg:grid-cols-[auto_minmax(0,1fr)_auto] lg:bg-shell", children: [_jsx("a", { href: "#contenu", className: "sr-only z-50 rounded-xl bg-background px-4 py-2 text-sm font-medium focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:ring-2 focus:ring-ring", children: "Aller au contenu" }), _jsxs("aside", { ref: sidebarRef, "data-slot": "app-shell-sidebar", "aria-label": "Barre lat\u00E9rale", inert: pageBlocked || undefined, className: "group/sidebar hidden overflow-hidden text-shell-foreground transition-[width] duration-(--duration-base) ease-ios motion-reduce:transition-none lg:flex lg:w-64 lg:flex-col lg:rail:w-16", children: [productRail ? (_jsx(ShellOrganizationHead, { organization: organization })) : (_jsxs(_Fragment, { children: [_jsx(SidebarHead, { product: product }), organization ? _jsx("div", { className: "shrink-0 px-3 pb-1", children: organization }) : null] })), navigation, _jsx("div", { "data-slot": "app-shell-footer", className: "grid gap-0.5 px-3 pt-1 pb-3 empty:hidden", children: footer })] }), _jsx("div", { inert: pageBlocked || undefined, className: "flex min-h-dvh flex-col lg:min-h-0 lg:p-2 lg:pl-0", children: _jsxs("div", { ref: contentRef, className: "relative flex flex-1 flex-col lg:min-h-0 lg:overflow-y-auto lg:rounded-xl lg:bg-background lg:[scrollbar-gutter:stable]", children: [_jsxs("header", { "data-slot": "app-shell-header", className: "sticky top-[env(safe-area-inset-top,0px)] z-30 flex min-h-14 shrink-0 flex-wrap items-center gap-x-1 gap-y-1 border-b border-foreground/5 bg-background px-2 py-1.5 sm:px-4 lg:top-0", children: [_jsx("div", { "data-slot": "app-shell-progress", "aria-hidden": true }), _jsx("button", { type: "button", onClick: () => setMenuOpen(true), "aria-label": "Ouvrir le menu", className: "touch-target grid size-10 shrink-0 place-items-center rounded-xl text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50 lg:hidden", children: _jsx(HugeiconsIcon, { icon: Menu01Icon, "aria-hidden": true, className: "size-5" }) }), _jsxs("div", { "data-slot": "app-shell-brand", className: "flex shrink-0 items-center gap-2 pr-1 lg:hidden", children: [_jsx(ProductBadge, { product: product, className: "size-6" }), _jsx("span", { className: "font-heading text-[0.9375rem] font-semibold", children: familyProductName(product) })] }), _jsx("div", { className: cn("flex min-w-0 items-center gap-2", header ? "flex-[1_1_7rem]" : "flex-1"), children: header }), onSearch ? (_jsx(CommandMenuButton, { onClick: onSearch, compact: "mobile", className: "shrink-0 lg:w-96 lg:max-w-none", ...(searchLabel !== undefined ? { label: searchLabel } : {}) })) : null, assistant ? (_jsx(AssistantButton, { assistant: assistant, panelId: assistantPanelId, buttonRef: assistantButtonRef })) : null] }), progress ? (_jsx("span", { role: "status", className: "sr-only", children: "Chargement de la page\u2026" })) : null, _jsx("div", { "data-slot": "app-shell-loading", "aria-hidden": !loading, className: CONTENT_LOADING_LAYER, children: loading ? (_jsx("span", { role: "status", className: "sr-only", children: "Chargement\u2026" })) : null }), _jsxs("main", { id: "contenu", tabIndex: -1, "aria-busy": loading ? true : undefined, inert: loading || undefined, className: cn("mx-auto w-full max-w-6xl flex-1 px-4 pt-6 pb-16 outline-none sm:px-6 lg:px-10 lg:pt-8", mainClassName), children: [_jsx(ServiceStatus, { pageUrl: statusPageUrl, className: "mb-6" }), _jsx(ShellContentContext, { value: true, children: contentKey === undefined ? (children) : (_jsx(Suspense, { fallback: _jsx(PagePending, {}), children: children }, contentKey)) })] })] }) }), assistant && assistantMounted ? (_jsx(AssistantPanel, { assistant: assistant, panelId: assistantPanelId, wide: wide, openAtShellMount: assistantOpenAtMount, buttonRef: assistantButtonRef })) : null, hasRoot ? null : _jsx(FamilyLoaderHost, {}), _jsx(Drawer, { side: "bottom", open: menuOpen, onOpenChange: setMenuOpen, children: _jsxs(DrawerContent, { className: "lg:hidden", children: [_jsx(DrawerTitle, { className: "sr-only", children: "Menu" }), organization ? _jsx("div", { className: "px-3 pt-1", children: organization }) : null, navigation, _jsx("div", { className: "grid gap-0.5 border-t border-foreground/5 px-3 pt-2 pb-[max(env(safe-area-inset-bottom),0.75rem)] empty:hidden", children: footer })] }) })] }) }) }) }) }) }));
 }

package/dist/basalte-mark.d.ts

@@ -0,0 +1 @@
+export declare const BASALTE_MARK_URI = "data:image/webp;base64,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";

package/dist/basalte-mark.js

@@ -0,0 +1,4 @@
+// Pierre de Basalte, 64 px en WebP (assez pour 20 px sur un écran 3x), réduite depuis
+// `family/basalte.png` (256 px, pierre du site hgdc.ch détourée). Pas de SVG : le logo est une image.
+// Régénérer : réduire `family/basalte.png` à 64 px (sharp, lanczos3, WebP qualité 92) et recoller ici.
+export const BASALTE_MARK_URI = "data:image/webp;base64,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";

package/dist/email.js

@@ -11,7 +11,7 @@ import { HGDC_ACCOUNT, HGDC_PRODUCTS } from "./products.js";
  */
 export { EMAIL_ICON_BASE, emailIconUrl };
 const MAIL_HREF = "https://mail.hgdc.ch";
-const LEGAL = "Hugo Gebel Développement Conseil, Lausanne";
+const LEGAL = "Hugo Gebel Développement Conseil, Denens (VD)";
 // Pas de police web : celle du système, Inter ou Geist quand elles sont installées.
 const FONT = 'Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
 const MONO = 'ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace';

package/dist/family-loader.d.ts

@@ -16,7 +16,7 @@ export declare function familyLoaderPhase(epochMs: number, period?: number): num
 /** Cale toutes les animations du H sous `root` sur l'horloge (voir `familyLoaderStartTime`). */
 export declare function syncFamilyLoader(root: Element | null): void;
 /**
- * Vrai sous `FamilyLoaderRoot` : le document a son chargeur, `PagePending` et la coque s'y
+ * Vrai sous `FamilyLoaderRoot` : le document a son chargeur, `PagePending` (hors de la coque) et la coque s'y
  * signalent au lieu de dessiner leur propre H.
  */
 export declare const FamilyLoaderRootContext: React.Context<boolean>;

package/dist/family-loader.js

@@ -60,7 +60,7 @@ function Mark() {
     return (_jsx(_Fragment, { children: PIECES.map((piece) => (_jsx("span", { "data-piece": piece, "aria-hidden": true, children: _jsx("span", { "data-fill": true }) }, piece))) }));
 }
 /**
- * Vrai sous `FamilyLoaderRoot` : le document a son chargeur, `PagePending` et la coque s'y
+ * Vrai sous `FamilyLoaderRoot` : le document a son chargeur, `PagePending` (hors de la coque) et la coque s'y
  * signalent au lieu de dessiner leur propre H.
  */
 export const FamilyLoaderRootContext = createContext(false);

package/dist/page-pending.d.ts

@@ -1,41 +1,38 @@
+import { type PageSkeletonVariant } from "./page-skeleton.tsx";
 /**
- * Délai avant de couvrir l'ancienne page pendant une navigation : une navigation préchargée
- * (survol, `defaultPreload: "intent"`) se termine avant et ne montre rien.
+ * Attente avant de remplacer l'ancienne page par le squelette de la nouvelle (ADR 0025). En dessous,
+ * l'ancienne page reste à l'écran avec la barre de progression : une navigation courte ne fait rien
+ * clignoter. Valeur par défaut de TanStack Router, et seuil d'une seconde de Nielsen.
  */
-export declare const PAGE_PENDING_MS = 50;
-/** Durée minimale d'affichage une fois apparu : le H ne clignote pas. */
-export declare const PAGE_PENDING_MIN_MS = 300;
+export declare const PAGE_PENDING_MS = 1000;
+/** Durée minimale d'affichage du squelette une fois apparu : il ne clignote pas (défaut de TanStack Router). */
+export declare const PAGE_PENDING_MIN_MS = 500;
+/** Attente avant la barre de progression d'une navigation : une page préchargée s'ouvre sans elle. */
+export declare const NAVIGATION_PROGRESS_MS = 150;
+/** Durée minimale de la barre de progression une fois apparue. */
+export declare const NAVIGATION_PROGRESS_MIN_MS = 300;
 /**
- * Calque de chargement de la zone de contenu : sous l'en-tête de la coque (56 px), sur toute la
- * largeur, opaque. Il cache l'ancienne page ; le H, lui, est celui du document
- * (`FamilyLoaderRoot`), en position fixe, au même pixel dans tous les états.
+ * Calque de la zone de contenu, sous l'en-tête de la coque (56 px), opaque : il cache la page
+ * pendant le départ vers un autre module, le H du document par-dessus (ADR 0015, 0020).
  */
 export declare const CONTENT_LOADING_LAYER = "absolute inset-x-0 top-14 bottom-0 z-20 bg-background";
+/** Vrai dans la zone de contenu d'`AppShell` : une page qui attend y montre son squelette, pas le H. */
+export declare const ShellContentContext: React.Context<boolean>;
 /**
- * @deprecated Le H d'un chargement de page est celui du document (`FamilyLoaderRoot`, ADR 0015) :
- * la scène ne garde qu'un texte pour les lecteurs d'écran.
- */
-export declare function ContentLoadingStage({ label }: {
-    label: string;
-}): React.JSX.Element;
-/**
- * Fourni par `AppShell` autour de la zone de contenu : `PagePending` s'y signale, la coque couvre
- * alors la zone de contenu et montre le H du document.
- */
-export declare const ContentLoadingContext: React.Context<(() => () => void) | null>;
-/**
- * Le chargement d'une page : le H de la famille, au centre de la zone de contenu de la coque, au
- * même pixel et à la même phase dans tous les états (calque de navigation de la coque, attente
- * d'une route, frontière `Suspense`, rendu serveur, page d'entrée, produit d'à côté). Ce composant
- * ne dessine pas de H : il marque la place de la page (`data-slot="page-pending"`) et le H du
- * document (`FamilyLoaderRoot`) s'affiche, dès le HTML du serveur. Dans la coque, la coque s'en
- * charge ; hors de la coque, le cadre de la coque est dessiné autour du H.
+ * Le chargement d'une page.
+ *
+ * - **Dans la coque** (`AppShell`) : le squelette de la page (`PageSkeleton`), la coque restant en
+ *   place. Jamais le H : il est réservé au document qui n'a pas encore de coque (ADR 0025).
+ * - **Hors de la coque** (page d'entrée, rendu serveur sans coque) : le H du document
+ *   (`FamilyLoaderRoot`), au même pixel que dans la coque (ADR 0015).
  *
- * Composant de `pendingComponent` (TanStack Router, `routerPendingDefaults`), repli de la frontière
- * `Suspense` de la coque, et état de chargement d'une page qui lit ses données.
+ * Composant par défaut de `pendingComponent` (`routerPendingDefaults`) et repli de la frontière
+ * `Suspense` de la coque. Une route dont la page n'est pas une liste passe sa forme :
+ * `pendingComponent: () => <PagePending variant="dashboard" />`.
  */
-export declare function PagePending({ label }: {
+export declare function PagePending({ label, variant, }: {
     label?: string;
+    variant?: PageSkeletonVariant;
 }): React.JSX.Element;
 /**
  * Vrai après `delay` ms de `active`, et le reste au moins `min` ms une fois vrai : un état bref ne
@@ -43,17 +40,20 @@ export declare function PagePending({ label }: {
  */
 export declare function useDelayedFlag(active: boolean, delay: number, min: number): boolean;
 /**
- * Réglages communs de `createRouter` (TanStack Router) :
+ * Réglages communs de `createRouter` (TanStack Router), ADR 0025 :
  * - préchargement au survol ou au focus d'un lien (`intent`) : la plupart des pages s'ouvrent sans
- *   attente ; `defaultPreloadStaleTime: 0` laisse TanStack Query décider de la fraîcheur ;
- * - une route qui attend encore ses données montre `PagePending` après 50 ms, au moins 300 ms.
+ *   attente ; `defaultPreloadStaleTime: 0` laisse TanStack Query décider de la fraîcheur (doc de
+ *   TanStack Router, « External data loading ») ;
+ * - pendant une navigation, l'ancienne page reste avec la barre de progression de la coque ; si la
+ *   nouvelle attend encore ses données après 1 s, son squelette (`PagePending`) la remplace, au
+ *   moins 500 ms.
  *
  * ```ts
  * createRouter({ routeTree, ...routerPendingDefaults })
  * ```
  *
- * La coque doit vivre dans une route de mise en page (`/o/$org`) et le `beforeLoad` de la racine
- * ne doit pas appeler le serveur à chaque navigation : une attente là remplacerait toute l'app.
+ * La coque doit vivre dans une route de mise en page (`/o/$org`), rendue avant les données des
+ * pages, et le `beforeLoad` de la racine ne doit pas appeler le serveur à chaque navigation.
  */
 export declare const routerPendingDefaults: {
     defaultPendingComponent: typeof PagePending;

package/dist/page-pending.js

@@ -1,51 +1,45 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useLayoutEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import { FamilyLoaderRootContext, PageLoadingPlaceholder } from "./family-loader.js";
+import { PageSkeleton } from "./page-skeleton.js";
 /**
- * Délai avant de couvrir l'ancienne page pendant une navigation : une navigation préchargée
- * (survol, `defaultPreload: "intent"`) se termine avant et ne montre rien.
+ * Attente avant de remplacer l'ancienne page par le squelette de la nouvelle (ADR 0025). En dessous,
+ * l'ancienne page reste à l'écran avec la barre de progression : une navigation courte ne fait rien
+ * clignoter. Valeur par défaut de TanStack Router, et seuil d'une seconde de Nielsen.
  */
-export const PAGE_PENDING_MS = 50;
-/** Durée minimale d'affichage une fois apparu : le H ne clignote pas. */
-export const PAGE_PENDING_MIN_MS = 300;
+export const PAGE_PENDING_MS = 1000;
+/** Durée minimale d'affichage du squelette une fois apparu : il ne clignote pas (défaut de TanStack Router). */
+export const PAGE_PENDING_MIN_MS = 500;
+/** Attente avant la barre de progression d'une navigation : une page préchargée s'ouvre sans elle. */
+export const NAVIGATION_PROGRESS_MS = 150;
+/** Durée minimale de la barre de progression une fois apparue. */
+export const NAVIGATION_PROGRESS_MIN_MS = 300;
 /**
- * Calque de chargement de la zone de contenu : sous l'en-tête de la coque (56 px), sur toute la
- * largeur, opaque. Il cache l'ancienne page ; le H, lui, est celui du document
- * (`FamilyLoaderRoot`), en position fixe, au même pixel dans tous les états.
+ * Calque de la zone de contenu, sous l'en-tête de la coque (56 px), opaque : il cache la page
+ * pendant le départ vers un autre module, le H du document par-dessus (ADR 0015, 0020).
  */
 export const CONTENT_LOADING_LAYER = "absolute inset-x-0 top-14 bottom-0 z-20 bg-background";
+/** Vrai dans la zone de contenu d'`AppShell` : une page qui attend y montre son squelette, pas le H. */
+export const ShellContentContext = createContext(false);
 /**
- * @deprecated Le H d'un chargement de page est celui du document (`FamilyLoaderRoot`, ADR 0015) :
- * la scène ne garde qu'un texte pour les lecteurs d'écran.
- */
-export function ContentLoadingStage({ label }) {
-    return (_jsx("span", { role: "status", className: "sr-only", children: label }));
-}
-/**
- * Fourni par `AppShell` autour de la zone de contenu : `PagePending` s'y signale, la coque couvre
- * alors la zone de contenu et montre le H du document.
- */
-export const ContentLoadingContext = createContext(null);
-/**
- * Le chargement d'une page : le H de la famille, au centre de la zone de contenu de la coque, au
- * même pixel et à la même phase dans tous les états (calque de navigation de la coque, attente
- * d'une route, frontière `Suspense`, rendu serveur, page d'entrée, produit d'à côté). Ce composant
- * ne dessine pas de H : il marque la place de la page (`data-slot="page-pending"`) et le H du
- * document (`FamilyLoaderRoot`) s'affiche, dès le HTML du serveur. Dans la coque, la coque s'en
- * charge ; hors de la coque, le cadre de la coque est dessiné autour du H.
+ * Le chargement d'une page.
+ *
+ * - **Dans la coque** (`AppShell`) : le squelette de la page (`PageSkeleton`), la coque restant en
+ *   place. Jamais le H : il est réservé au document qui n'a pas encore de coque (ADR 0025).
+ * - **Hors de la coque** (page d'entrée, rendu serveur sans coque) : le H du document
+ *   (`FamilyLoaderRoot`), au même pixel que dans la coque (ADR 0015).
  *
- * Composant de `pendingComponent` (TanStack Router, `routerPendingDefaults`), repli de la frontière
- * `Suspense` de la coque, et état de chargement d'une page qui lit ses données.
+ * Composant par défaut de `pendingComponent` (`routerPendingDefaults`) et repli de la frontière
+ * `Suspense` de la coque. Une route dont la page n'est pas une liste passe sa forme :
+ * `pendingComponent: () => <PagePending variant="dashboard" />`.
  */
-export function PagePending({ label = "Chargement…" }) {
-    const register = useContext(ContentLoadingContext);
+export function PagePending({ label = "Chargement…", variant, }) {
+    const inShell = useContext(ShellContentContext);
     const hasRoot = useContext(FamilyLoaderRootContext);
-    useIsomorphicLayoutEffect(() => register?.(), [register]);
-    if (!register)
-        return _jsx(PageLoadingPlaceholder, { label: label, hasRoot: hasRoot });
-    return (_jsx("div", { "data-slot": "page-pending", role: "status", "aria-label": label, className: "min-h-[calc(100dvh-10rem)]" }));
+    if (inShell)
+        return _jsx(PageSkeleton, { label: label, ...(variant ? { variant } : {}) });
+    return _jsx(PageLoadingPlaceholder, { label: label, hasRoot: hasRoot });
 }
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 /**
  * Vrai après `delay` ms de `active`, et le reste au moins `min` ms une fois vrai : un état bref ne
  * montre rien, un état montré ne clignote pas.
@@ -70,17 +64,20 @@ export function useDelayedFlag(active, delay, min) {
     return visible;
 }
 /**
- * Réglages communs de `createRouter` (TanStack Router) :
+ * Réglages communs de `createRouter` (TanStack Router), ADR 0025 :
  * - préchargement au survol ou au focus d'un lien (`intent`) : la plupart des pages s'ouvrent sans
- *   attente ; `defaultPreloadStaleTime: 0` laisse TanStack Query décider de la fraîcheur ;
- * - une route qui attend encore ses données montre `PagePending` après 50 ms, au moins 300 ms.
+ *   attente ; `defaultPreloadStaleTime: 0` laisse TanStack Query décider de la fraîcheur (doc de
+ *   TanStack Router, « External data loading ») ;
+ * - pendant une navigation, l'ancienne page reste avec la barre de progression de la coque ; si la
+ *   nouvelle attend encore ses données après 1 s, son squelette (`PagePending`) la remplace, au
+ *   moins 500 ms.
  *
  * ```ts
  * createRouter({ routeTree, ...routerPendingDefaults })
  * ```
  *
- * La coque doit vivre dans une route de mise en page (`/o/$org`) et le `beforeLoad` de la racine
- * ne doit pas appeler le serveur à chaque navigation : une attente là remplacerait toute l'app.
+ * La coque doit vivre dans une route de mise en page (`/o/$org`), rendue avant les données des
+ * pages, et le `beforeLoad` de la racine ne doit pas appeler le serveur à chaque navigation.
  */
 export const routerPendingDefaults = {
     defaultPendingComponent: PagePending,

package/dist/page-skeleton.d.ts

@@ -0,0 +1,16 @@
+/**
+ * La forme d'une page qui charge, dans la coque. Elle reprend la mise en page de `Page`
+ * (`@hgdc/ui/page-header`) : en-tête de la même hauteur, même colonne, même espacement, pour que
+ * rien ne saute quand la page arrive (ADR 0025).
+ *
+ * - `list` : un tableau ou une liste (par défaut) ;
+ * - `dashboard` : des chiffres en tête, un graphique, une liste ;
+ * - `form` : des réglages ou une fiche, dans la colonne de lecture.
+ */
+export type PageSkeletonVariant = "list" | "dashboard" | "form";
+export declare function PageSkeleton({ variant, label, className, }: {
+    variant?: PageSkeletonVariant;
+    /** Annoncé aux lecteurs d'écran. */
+    label?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/page-skeleton.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./cn.js";
+import { Skeleton } from "./skeleton.js";
+export function PageSkeleton({ variant = "list", label = "Chargement…", className, }) {
+    return (_jsxs("div", { "data-slot": "page-skeleton", "data-variant": variant, role: "status", "aria-label": label, className: cn("w-full", variant === "form" && "max-w-3xl", className), children: [_jsx("div", { "data-slot": "page-header", className: "mb-8 grid gap-3", children: _jsxs("div", { className: "min-w-0", children: [_jsx(Skeleton, { className: "h-9 w-56 max-w-full rounded-lg" }), _jsx(Skeleton, { className: "mt-2 h-4 w-80 max-w-full rounded-md" })] }) }), _jsx("div", { className: "grid gap-6", children: BODIES[variant] })] }));
+}
+function Rows({ count }) {
+    return (_jsx("div", { className: "overflow-hidden rounded-2xl border border-foreground/5", children: Array.from({ length: count }, (_, index) => (_jsxs("div", { className: "flex items-center gap-4 border-b border-foreground/5 px-4 py-3 last:border-b-0", children: [_jsx(Skeleton, { className: "size-8 shrink-0 rounded-lg" }), _jsxs("div", { className: "grid min-w-0 flex-1 gap-1.5", children: [_jsx(Skeleton, { className: "h-4 w-2/5 rounded-md" }), _jsx(Skeleton, { className: "h-3 w-1/4 rounded-md" })] }), _jsx(Skeleton, { className: "hidden h-6 w-16 rounded-full sm:block" })] }, index))) }));
+}
+const BODIES = {
+    list: (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-10 w-full max-w-md" }), _jsx(Rows, { count: 6 })] })),
+    dashboard: (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-2 gap-4 lg:grid-cols-4", children: Array.from({ length: 4 }, (_, index) => (_jsx(Skeleton, { className: "h-24 rounded-2xl" }, index))) }), _jsx(Skeleton, { className: "h-64 rounded-2xl" }), _jsx(Rows, { count: 4 })] })),
+    form: (_jsx(_Fragment, { children: Array.from({ length: 3 }, (_, index) => (_jsxs("div", { className: "grid gap-4 rounded-2xl border border-foreground/5 p-6", children: [_jsx(Skeleton, { className: "h-5 w-40 rounded-md" }), _jsx(Skeleton, { className: "h-10 w-full" }), _jsx(Skeleton, { className: "h-10 w-2/3" })] }, index))) })),
+};

package/dist/product-badge.d.ts

@@ -20,6 +20,8 @@ type MarkProps = {
 export declare function ProductBadge({ product, className, label }: MarkProps & {
     product: FamilyProduct;
 }): React.JSX.Element;
-/** Le H « Double », marque de la H Collection (« Propulsé par », hub). `size-4` par défaut. */
+/** La pierre de Basalte (« Propulsé par … | Basalte »). Même image dans les deux thèmes. `size-4` par défaut. */
+export declare function BasalteMark({ className, label }: MarkProps): React.JSX.Element;
+/** Le H « Double », marque de la H Collection (hub). `size-4` par défaut. */
 export declare function FamilyMark({ className, label }: MarkProps): React.JSX.Element;
 export {};

package/dist/product-badge.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BASALTE_MARK_URI } from "./basalte-mark.js";
 import { cn } from "./cn.js";
 import { FAMILY_MARK_SVG, PRODUCT_BADGE_SVG } from "./family-svg.js";
 /**
@@ -37,7 +38,11 @@ function ThemedMark({ svg, slot, className, label }) {
 export function ProductBadge({ product, className, label }) {
     return (_jsx("img", { src: dataUri(PRODUCT_BADGE_SVG[product]), alt: label ?? "", "aria-hidden": label ? undefined : true, width: 16, height: 16, draggable: false, "data-slot": "product-badge", className: cn("size-4 shrink-0 select-none", className) }));
 }
-/** Le H « Double », marque de la H Collection (« Propulsé par », hub). `size-4` par défaut. */
+/** La pierre de Basalte (« Propulsé par … | Basalte »). Même image dans les deux thèmes. `size-4` par défaut. */
+export function BasalteMark({ className, label }) {
+    return (_jsx("img", { src: BASALTE_MARK_URI, alt: label ?? "", "aria-hidden": label ? undefined : true, width: 16, height: 16, draggable: false, "data-slot": "basalte-mark", className: cn("size-4 shrink-0 select-none", className) }));
+}
+/** Le H « Double », marque de la H Collection (hub). `size-4` par défaut. */
 export function FamilyMark({ className, label }) {
     return _jsx(ThemedMark, { svg: FAMILY_MARK_SVG, slot: "family-mark", className: className, label: label });
 }

package/dist/use-content-loading.d.ts

@@ -3,11 +3,8 @@ export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
 /** Faux au rendu serveur et à l'hydratation, vrai avant la première image qui suit. */
 export declare function useHydrated(): boolean;
 /**
- * Le chargement de la zone de contenu : `navigating` après 50 ms, `pending` aussitôt, puis au
- * moins 300 ms. Effets de mise en page : une page qui passe en attente est couverte avant d'être
- * peinte, jamais une image vide entre les deux.
+ * Le calque du H sur la zone de contenu, pendant le départ vers un autre module : aussitôt, puis
+ * au moins 300 ms. Effet de mise en page : la page est couverte avant d'être peinte, jamais une
+ * image vide entre les deux. Une navigation dans le module ne le montre plus (ADR 0025).
  */
-export declare function useContentLoading({ navigating, pending }: {
-    navigating: boolean;
-    pending: boolean;
-}): boolean;
+export declare function useShellCover(active: boolean): boolean;

package/dist/use-content-loading.js

@@ -1,5 +1,6 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { PAGE_PENDING_MIN_MS, PAGE_PENDING_MS } from "./page-pending.js";
+/** Durée minimale du calque de départ une fois montré : le H ne clignote pas. */
+const COVER_MIN_MS = 300;
 export const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 /** Faux au rendu serveur et à l'hydratation, vrai avant la première image qui suit. */
 export function useHydrated() {
@@ -8,22 +9,11 @@ export function useHydrated() {
     return hydrated;
 }
 /**
- * Le chargement de la zone de contenu : `navigating` après 50 ms, `pending` aussitôt, puis au
- * moins 300 ms. Effets de mise en page : une page qui passe en attente est couverte avant d'être
- * peinte, jamais une image vide entre les deux.
+ * Le calque du H sur la zone de contenu, pendant le départ vers un autre module : aussitôt, puis
+ * au moins 300 ms. Effet de mise en page : la page est couverte avant d'être peinte, jamais une
+ * image vide entre les deux. Une navigation dans le module ne le montre plus (ADR 0025).
  */
-export function useContentLoading({ navigating, pending }) {
-    const [navigatingLong, setNavigatingLong] = useState(false);
-    useEffect(() => {
-        if (!navigating)
-            return undefined;
-        const timer = window.setTimeout(() => setNavigatingLong(true), PAGE_PENDING_MS);
-        return () => {
-            window.clearTimeout(timer);
-            setNavigatingLong(false);
-        };
-    }, [navigating]);
-    const active = pending || (navigating && navigatingLong);
+export function useShellCover(active) {
     const [visible, setVisible] = useState(false);
     const shownAt = useRef(0);
     useIsomorphicLayoutEffect(() => {
@@ -33,7 +23,7 @@ export function useContentLoading({ navigating, pending }) {
             return undefined;
         }
         if (!active && visible) {
-            const timer = window.setTimeout(() => setVisible(false), Math.max(0, shownAt.current + PAGE_PENDING_MIN_MS - performance.now()));
+            const timer = window.setTimeout(() => setVisible(false), Math.max(0, shownAt.current + COVER_MIN_MS - performance.now()));
             return () => window.clearTimeout(timer);
         }
         return undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.69.1",
+  "version": "0.71.0",
   "description": "Interface de la H Collection : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",

package/styles.css

@@ -793,9 +793,9 @@
 }
 
 /* Le chargeur du document (`FamilyLoaderRoot`) : un seul H par page, en position fixe sur la scène.
-   Visible quand une page attend (`PagePending`) hors de la coque, quand la coque charge
-   (`data-loading`), ou dès le rendu serveur quand une page attend dans une coque pas encore
-   hydratée. Masqué avec 80 ms de retenue : un `PagePending` qui laisse la place à un autre ne fait
+   Visible quand une page attend (`PagePending`) hors de la coque, ou quand la coque part vers un
+   autre module (`data-loading`). Dans la coque, une page qui attend montre son squelette, jamais
+   le H (ADR 0025). Masqué avec 80 ms de retenue : un `PagePending` qui laisse la place à un autre ne fait
    pas clignoter le H. */
 [data-slot="family-loader-root"] {
   position: fixed;
@@ -809,8 +809,7 @@
     visibility 0s linear 200ms;
 }
 :root:has([data-slot="page-pending"]):not(:has([data-slot="app-shell"])) [data-slot="family-loader-root"],
-:root:has([data-slot="app-shell"][data-loading]) [data-slot="family-loader-root"],
-:root:has([data-slot="app-shell"]:not([data-hydrated]) [data-slot="page-pending"]) [data-slot="family-loader-root"] {
+:root:has([data-slot="app-shell"][data-loading]) [data-slot="family-loader-root"] {
   opacity: 1;
   visibility: visible;
   transition:
@@ -877,8 +876,8 @@
   content: var(--hgdc-org-initials, "");
 }
 
-/* Calque de la zone de contenu (`AppShell`) : opaque, au-dessus de l'ancienne page, sous le H du
-   document. Mêmes conditions et même rythme que le H : ils apparaissent et s'effacent ensemble. */
+/* Calque de la zone de contenu (`AppShell`) pendant le départ vers un autre module : opaque,
+   au-dessus de la page, sous le H du document. Même rythme que le H. */
 [data-slot="app-shell-loading"] {
   opacity: 0;
   visibility: hidden;
@@ -886,8 +885,7 @@
     opacity 120ms var(--ease-out) 80ms,
     visibility 0s linear 200ms;
 }
-[data-slot="app-shell"][data-loading] [data-slot="app-shell-loading"],
-[data-slot="app-shell"]:not([data-hydrated]):has([data-slot="page-pending"]) [data-slot="app-shell-loading"] {
+[data-slot="app-shell"][data-loading] [data-slot="app-shell-loading"] {
   opacity: 1;
   visibility: visible;
   transition:
@@ -895,6 +893,52 @@
     visibility 0s;
 }
 
+/* Barre de progression d'une navigation dans le module (ADR 0025) : 2 px sous la barre du haut,
+   l'ancienne page reste lisible. Un segment qui court de gauche à droite, `transform` seul.
+   Mouvement réduit : la barre entière, immobile, en demi-teinte. */
+[data-slot="app-shell-progress"] {
+  position: absolute;
+  inset-inline: 0;
+  bottom: -1px;
+  height: 2px;
+  overflow: hidden;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 200ms var(--ease-out);
+}
+[data-slot="app-shell-progress"]::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  width: 40%;
+  background: var(--primary);
+  transform: translateX(-100%);
+}
+[data-slot="app-shell"][data-navigating] [data-slot="app-shell-progress"] {
+  opacity: 1;
+  transition-duration: 100ms;
+}
+[data-slot="app-shell"][data-navigating] [data-slot="app-shell-progress"]::before {
+  animation: hgdc-progress 1.1s var(--ease-in-out) infinite;
+}
+@keyframes hgdc-progress {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="app-shell"][data-navigating] [data-slot="app-shell-progress"]::before {
+    animation: none;
+    width: 100%;
+    transform: none;
+    opacity: 0.5;
+  }
+}
+
 /* Passage d'un produit à l'autre sous la même origine (`app.hgdc.ch/<produit>`, ADR 0020) : une
    transition de vue entre documents. La barre latérale et la barre du haut
    gardent leur place (même nom des deux côtés : elles ne bougent pas, leur contenu passe en
@@ -925,8 +969,7 @@
   }
 }
 :root:has([data-slot="page-pending"]):not(:has([data-slot="app-shell"])),
-:root:has([data-slot="app-shell"][data-loading]),
-:root:has([data-slot="app-shell"]:not([data-hydrated]) [data-slot="page-pending"]) {
+:root:has([data-slot="app-shell"][data-loading]) {
   & [data-slot="family-loader-root"] > [data-stage] {
     view-transition-name: hgdc-loader;
   }