feat(recipes): scroll infini + placeholders sur le parcours des sources externes
Remplace le bouton "Voir plus" de RecipeSourcesPanel par un scroll infini : une ligne sentinelle en fin de liste (SourceItemTable), observée via IntersectionObserver scopé au conteneur scrollable de la table, déclenche le chargement de la page suivante quand elle approche du bas. Le panel précharge en plus la page suivante dès que la page courante s'affiche (pas seulement au moment où la sentinelle devient visible), pour qu'un défilement rapide tombe le plus souvent sur une réponse déjà arrivée plutôt que de déclencher un aller-retour réseau à ce moment précis. Pendant un chargement (préchargé ou non), SourceItemTable ajoute des lignes squelettes qui pulsent en bas de la liste au lieu de laisser un vide. Un échec de chargement n'efface plus la liste déjà chargée comme avant (bug corrigé au passage) — un message avec un lien "Réessayer" s'affiche à la place ; ce correctif inclut aussi le nettoyage d'un préchargement en échec qui, sinon, aurait fait rejouer indéfiniment la même promesse déjà rejetée à chaque tentative de réessai. Deux nouveaux scénarios Cypress (recipe-sources.feature) : chargement automatique de pages supplémentaires sans bouton, et réessai après un échec du chargement suivant. Suite e2e complète relancée (78/79, le seul échec restant est un test préexistant sans rapport, recipe-form.feature, signalé séparément). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
8eb949fd28
commit
ee22469144
7 changed files with 350 additions and 19 deletions
|
|
@ -45,6 +45,29 @@ Feature: Browsing external recipe sources
|
|||
And the recipe detail panel heading should be "Fish Pie"
|
||||
And I should see the highlighted technique "Cuire"
|
||||
|
||||
Scenario: Loads further pages automatically, with no "load more" button
|
||||
Given the recipe catalog contains nothing
|
||||
And the sources reference list has options
|
||||
And the household has enabled TheMealDB
|
||||
And browsing TheMealDB returns two pages of items
|
||||
When I visit "/recettes"
|
||||
And I click the button "TheMealDB"
|
||||
Then I should see the source item "Chicken Handi"
|
||||
And I should see the source item "Beef Wellington"
|
||||
And I should not see "Voir plus"
|
||||
|
||||
Scenario: Offers a retry when loading the next page fails
|
||||
Given the recipe catalog contains nothing
|
||||
And the sources reference list has options
|
||||
And the household has enabled TheMealDB
|
||||
And browsing TheMealDB's next page fails once, then succeeds
|
||||
When I visit "/recettes"
|
||||
And I click the button "TheMealDB"
|
||||
Then I should see the source item "Chicken Handi"
|
||||
And I should see a message to retry loading more
|
||||
When I click the button "Réessayer"
|
||||
Then I should see the source item "Beef Wellington"
|
||||
|
||||
Scenario: Deep-links straight to a not-yet-imported item's own page, with no import affordance at all
|
||||
Given the recipe catalog contains nothing
|
||||
And the sources reference list has options
|
||||
|
|
|
|||
|
|
@ -83,6 +83,81 @@ Given("browsing TheMealDB returns some items", () => {
|
|||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* A second, distinct item from `Given("browsing TheMealDB returns some
|
||||
* items")`'s page-1 pair — used by the infinite-scroll/retry scenarios
|
||||
* below, which need to tell "the item that only shows up once the *next*
|
||||
* page has loaded" apart from what's already visible on page 1.
|
||||
*/
|
||||
const BEEF_WELLINGTON_ITEM = {
|
||||
externalId: "77123",
|
||||
title: "Beef Wellington",
|
||||
picture: null,
|
||||
url: "https://www.themealdb.com/meal/77123",
|
||||
alreadyImported: false,
|
||||
recipeId: null,
|
||||
};
|
||||
|
||||
const CHICKEN_HANDI_AND_FISH_PIE_PAGE_1 = {
|
||||
items: [
|
||||
{
|
||||
externalId: "52795",
|
||||
title: "Chicken Handi",
|
||||
picture: null,
|
||||
url: "https://www.themealdb.com/meal/52795",
|
||||
alreadyImported: true,
|
||||
recipeId: 2,
|
||||
},
|
||||
{
|
||||
externalId: "9999",
|
||||
title: "Fish Pie",
|
||||
picture: null,
|
||||
url: "https://www.themealdb.com/meal/9999",
|
||||
alreadyImported: false,
|
||||
recipeId: null,
|
||||
},
|
||||
],
|
||||
nextCursor: "2",
|
||||
};
|
||||
|
||||
Given("browsing TheMealDB returns two pages of items", () => {
|
||||
cy.intercept("GET", "**/sources/theMealDb/browse*", (req) => {
|
||||
const isNextPage = req.url.includes("cursor=");
|
||||
req.reply({
|
||||
statusCode: 200,
|
||||
body: isNextPage
|
||||
? { items: [BEEF_WELLINGTON_ITEM], nextCursor: null }
|
||||
: CHICKEN_HANDI_AND_FISH_PIE_PAGE_1,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// The panel prefetches the next page as soon as page 1 is on screen (before
|
||||
// anyone's actually waited on it), so the *first* request for it is that
|
||||
// prefetch — this is what actually fails "once", not a request triggered by
|
||||
// a click. `handleLoadMore`'s own retry then makes a genuinely fresh
|
||||
// request (see its own doc comment on why a failed prefetch gets cleared),
|
||||
// which is the one that succeeds here.
|
||||
Given("browsing TheMealDB's next page fails once, then succeeds", () => {
|
||||
let nextPageAttempts = 0;
|
||||
cy.intercept("GET", "**/sources/theMealDb/browse*", (req) => {
|
||||
if (!req.url.includes("cursor=")) {
|
||||
req.reply({ statusCode: 200, body: CHICKEN_HANDI_AND_FISH_PIE_PAGE_1 });
|
||||
return;
|
||||
}
|
||||
nextPageAttempts += 1;
|
||||
if (nextPageAttempts === 1) {
|
||||
req.reply({ statusCode: 500, body: {} });
|
||||
} else {
|
||||
req.reply({ statusCode: 200, body: { items: [BEEF_WELLINGTON_ITEM], nextCursor: null } });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Then("I should see a message to retry loading more", () => {
|
||||
cy.contains(".recipes-page__status--error", "Réessayer").should("be.visible");
|
||||
});
|
||||
|
||||
Given("previewing TheMealDB item {string} is available", (externalId: string) => {
|
||||
cy.intercept("GET", `**/sources/theMealDb/preview/${externalId}`, {
|
||||
statusCode: 200,
|
||||
|
|
|
|||
|
|
@ -372,20 +372,75 @@
|
|||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.source-items-load-more {
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
padding: 0.4rem var(--space-lg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--font-size-sm);
|
||||
// Browsing a source scrolls infinitely (SourceItemTable's own sentinel row
|
||||
// triggers RecipeSourcesPanel's handleLoadMore) — this is only the inline
|
||||
// retry action shown alongside recipes.sources.loadMoreError when a page
|
||||
// fetch actually fails, not a persistent "load more" control.
|
||||
.source-items-retry {
|
||||
padding: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
background: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-pill);
|
||||
border: none;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Pulsing placeholder rows `SourceItemTable` appends below the real items
|
||||
// while `RecipeSourcesPanel`'s "load more" fetch is in flight — with that
|
||||
// panel prefetching the next page ahead of time (as soon as the sentinel
|
||||
// row scrolls near view), this is usually a very brief flash rather than
|
||||
// an actual wait, but it keeps the list
|
||||
// filling in instead of looking like nothing happened either way.
|
||||
@keyframes source-item-skeleton-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
// Invisible marker row `SourceItemTable`'s `IntersectionObserver` watches
|
||||
// to trigger infinite scroll — no padding/border of its own, unlike a real
|
||||
// row, so it doesn't show up as a stray empty stripe at the bottom of the
|
||||
// list.
|
||||
.source-item-table__sentinel td {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.source-item-table__row--skeleton {
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary);
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.source-item-table__photo--skeleton,
|
||||
.source-item-table__skeleton-bar {
|
||||
background: var(--color-border);
|
||||
animation: source-item-skeleton-pulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.source-item-table__skeleton-bar {
|
||||
display: block;
|
||||
width: 60%;
|
||||
height: 0.9rem;
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.source-item-table__photo--skeleton,
|
||||
.source-item-table__skeleton-bar {
|
||||
animation: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import type { BrowsableSourceItemView, RecipeView } from "@batch-cooking/shared";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { apiClient } from "../../../api/client";
|
||||
import { RecipeDetailPanel, type RecipeDetailState } from "../RecipeDetailPanel";
|
||||
|
|
@ -9,6 +9,15 @@ import "../recipes.scss";
|
|||
/** Debounce for the search field — same idea/value as `RecipesPage`'s own search. */
|
||||
const SEARCH_DEBOUNCE_MS = 300;
|
||||
|
||||
/** How many pulsing skeleton rows `handleLoadMore` shows while its fetch is in flight — see `loadMoreStatus`. Not tied to any source's real page size (that varies per source, and isn't known client-side); just enough to visibly fill the gap below the list without over-promising. */
|
||||
const LOAD_MORE_PLACEHOLDER_COUNT = 4;
|
||||
|
||||
/** One page of `sourceKey`'s browsable catalog, as returned by `apiClient.browseSource`. */
|
||||
interface BrowsePage {
|
||||
items: BrowsableSourceItemView[];
|
||||
nextCursor: string | null;
|
||||
}
|
||||
|
||||
/** One item's identity within a source's browsable catalog — `sourceKey` + `externalId` together, since `externalId` alone is only unique per source. */
|
||||
export interface SourceItemSelection {
|
||||
sourceKey: string;
|
||||
|
|
@ -76,6 +85,30 @@ export function RecipeSourcesPanel({
|
|||
const [search, setSearch] = useState("");
|
||||
const [debouncedSearch, setDebouncedSearch] = useState("");
|
||||
const [browseState, setBrowseState] = useState<BrowseState>({ status: "loading" });
|
||||
const [loadMoreStatus, setLoadMoreStatus] = useState<"idle" | "loading" | "error">("idle");
|
||||
// The *next* page, fetched ahead of time as soon as the current one is on
|
||||
// screen (see the effect below) — a ref, not state, since it's an
|
||||
// implementation detail `handleLoadMore` consumes, never itself rendered.
|
||||
// Keyed on exactly what makes a prefetch valid to reuse (source/query/
|
||||
// cursor all matching) rather than just "is something in flight", so a
|
||||
// stale prefetch from before a search/source change is never mistaken for
|
||||
// the page that's actually needed next.
|
||||
const nextPagePrefetchRef = useRef<{
|
||||
sourceKey: string;
|
||||
query: string;
|
||||
cursor: string;
|
||||
promise: Promise<BrowsePage>;
|
||||
} | null>(null);
|
||||
// Re-entrancy guard for `handleLoadMore` — infinite scroll (unlike a
|
||||
// button `onClick`) can call it again before the previous call has
|
||||
// settled (e.g. the sentinel row is still intersecting when the observer
|
||||
// re-evaluates after a layout shift). A ref, not `loadMoreStatus`: that
|
||||
// state only exists to drive what's rendered and is read from React's
|
||||
// closure at call time, which would still read the *previous* render's
|
||||
// (stale) value inside a handler fired synchronously off a fresh
|
||||
// browser event — this needs to be checked/set immediately and
|
||||
// synchronously, which only a ref does correctly here.
|
||||
const isLoadingMoreRef = useRef(false);
|
||||
const [selectedExternalId, setSelectedExternalId] = useState<string | null>(
|
||||
initialSelection?.externalId ?? null,
|
||||
);
|
||||
|
|
@ -127,6 +160,11 @@ export function RecipeSourcesPanel({
|
|||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setBrowseState({ status: "loading" });
|
||||
// A fresh search/source is a fresh list — any in-flight "load more" or
|
||||
// stale prefetch from the *previous* one no longer applies to anything.
|
||||
setLoadMoreStatus("idle");
|
||||
nextPagePrefetchRef.current = null;
|
||||
isLoadingMoreRef.current = false;
|
||||
|
||||
apiClient
|
||||
.browseSource(sourceKey, { query: debouncedSearch.trim() || undefined })
|
||||
|
|
@ -142,21 +180,78 @@ export function RecipeSourcesPanel({
|
|||
};
|
||||
}, [sourceKey, debouncedSearch]);
|
||||
|
||||
// Prefetches the page after the one currently on screen, so scrolling
|
||||
// near the bottom (SourceItemTable's sentinel row, which calls
|
||||
// handleLoadMore) usually just swaps in data that's already arrived
|
||||
// instead of starting a fresh round-trip right when someone's waiting on
|
||||
// it — `handleLoadMore` below reuses this when it matches. Re-runs on every
|
||||
// `browseState` change, so a load-more that appends a new page and a new
|
||||
// `nextCursor` immediately kicks off prefetching the page *after* that
|
||||
// one too, keeping the panel permanently one page ahead of what's shown.
|
||||
useEffect(() => {
|
||||
if (browseState.status !== "loaded" || !browseState.nextCursor) return;
|
||||
const cursor = browseState.nextCursor;
|
||||
const query = debouncedSearch.trim();
|
||||
const already = nextPagePrefetchRef.current;
|
||||
if (
|
||||
already &&
|
||||
already.sourceKey === sourceKey &&
|
||||
already.query === query &&
|
||||
already.cursor === cursor
|
||||
) {
|
||||
return; // already prefetching/prefetched exactly this page
|
||||
}
|
||||
const promise = apiClient.browseSource(sourceKey, { query: query || undefined, cursor });
|
||||
nextPagePrefetchRef.current = { sourceKey, query, cursor, promise };
|
||||
// A failed prefetch is swallowed here on purpose — nobody's actually
|
||||
// waiting on it yet. If `handleLoadMore` later reuses this same promise
|
||||
// it awaits/catches the rejection itself at that point; if it's never
|
||||
// reused (the prefetch just goes stale), this `.catch()` only exists to
|
||||
// keep the rejection from surfacing as an unhandled one.
|
||||
promise.catch(() => {});
|
||||
}, [browseState, sourceKey, debouncedSearch]);
|
||||
|
||||
function handleLoadMore() {
|
||||
if (browseState.status !== "loaded" || !browseState.nextCursor) {
|
||||
return;
|
||||
}
|
||||
if (isLoadingMoreRef.current) {
|
||||
return; // already fetching this exact next page — see the ref's own doc comment
|
||||
}
|
||||
isLoadingMoreRef.current = true;
|
||||
const cursor = browseState.nextCursor;
|
||||
apiClient
|
||||
.browseSource(sourceKey, { query: debouncedSearch.trim() || undefined, cursor })
|
||||
const query = debouncedSearch.trim();
|
||||
setLoadMoreStatus("loading");
|
||||
|
||||
const prefetch = nextPagePrefetchRef.current;
|
||||
const request =
|
||||
prefetch &&
|
||||
prefetch.sourceKey === sourceKey &&
|
||||
prefetch.query === query &&
|
||||
prefetch.cursor === cursor
|
||||
? prefetch.promise
|
||||
: apiClient.browseSource(sourceKey, { query: query || undefined, cursor });
|
||||
|
||||
request
|
||||
.then(({ items, nextCursor }) => {
|
||||
nextPagePrefetchRef.current = null;
|
||||
isLoadingMoreRef.current = false;
|
||||
setBrowseState((prev) =>
|
||||
prev.status === "loaded"
|
||||
? { status: "loaded", items: [...prev.items, ...items], nextCursor }
|
||||
: prev,
|
||||
);
|
||||
setLoadMoreStatus("idle");
|
||||
})
|
||||
.catch(() => setBrowseState({ status: "error" }));
|
||||
.catch(() => {
|
||||
// Also clears a failed *prefetch*, not just a failed manual retry —
|
||||
// otherwise a rejected promise would sit in the ref forever, and
|
||||
// "Réessayer" would just keep reusing (and re-rejecting on) that
|
||||
// same dead promise instead of ever making a fresh request.
|
||||
nextPagePrefetchRef.current = null;
|
||||
isLoadingMoreRef.current = false;
|
||||
setLoadMoreStatus("error");
|
||||
});
|
||||
}
|
||||
|
||||
function handleSelectItem(item: BrowsableSourceItemView) {
|
||||
|
|
@ -217,11 +312,17 @@ export function RecipeSourcesPanel({
|
|||
items={browseState.items}
|
||||
selectedExternalId={selectedExternalId}
|
||||
onSelect={handleSelectItem}
|
||||
placeholderCount={loadMoreStatus === "loading" ? LOAD_MORE_PLACEHOLDER_COUNT : 0}
|
||||
hasMore={browseState.nextCursor !== null}
|
||||
onLoadMore={handleLoadMore}
|
||||
/>
|
||||
{browseState.nextCursor && (
|
||||
<button type="button" className="source-items-load-more" onClick={handleLoadMore}>
|
||||
{t("recipes.sources.loadMore")}
|
||||
</button>
|
||||
{loadMoreStatus === "error" && (
|
||||
<p className="recipes-page__status recipes-page__status--error">
|
||||
{t("recipes.sources.loadMoreError")}{" "}
|
||||
<button type="button" className="source-items-retry" onClick={handleLoadMore}>
|
||||
{t("recipes.sources.retry")}
|
||||
</button>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import type { BrowsableSourceItemView } from "@batch-cooking/shared";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import "../recipes.scss";
|
||||
|
||||
|
|
@ -8,20 +9,66 @@ import "../recipes.scss";
|
|||
* an "already imported" badge in place of allergen/regime columns (a
|
||||
* source item has neither, it's not resolved against our catalogs until
|
||||
* previewed).
|
||||
*
|
||||
* Infinite scroll, not a "voir plus" button: a zero-content sentinel row
|
||||
* (`source-item-table__sentinel`) sits right after `items`, watched by an
|
||||
* `IntersectionObserver` scoped to this table's own scrolling container
|
||||
* (`.recipe-table-wrap`, not the page) — scrolling it into view calls
|
||||
* `onLoadMore`, the same callback a button's `onClick` would have. Kept
|
||||
* entirely inside this component rather than exposed as a prop callback
|
||||
* signature change on every call site: `RecipeSourcesPanel` doesn't need to
|
||||
* know *how* "load more" gets triggered, only that it does.
|
||||
*/
|
||||
export function SourceItemTable({
|
||||
items,
|
||||
selectedExternalId,
|
||||
onSelect,
|
||||
placeholderCount = 0,
|
||||
hasMore = false,
|
||||
onLoadMore,
|
||||
}: {
|
||||
items: BrowsableSourceItemView[];
|
||||
selectedExternalId: string | null;
|
||||
onSelect: (item: BrowsableSourceItemView) => void;
|
||||
/**
|
||||
* Extra pulsing skeleton rows appended after `items` — `RecipeSourcesPanel`
|
||||
* sets this while a "load more" fetch is in flight, so the list fills in
|
||||
* right away instead of looking like nothing happened. Purely decorative:
|
||||
* never clickable/focusable, unlike a real row.
|
||||
*/
|
||||
placeholderCount?: number;
|
||||
/** Whether a further page exists — renders the sentinel row (and therefore observes it) only when true; the observer would otherwise have nothing meaningful to trigger once the catalog is exhausted. */
|
||||
hasMore?: boolean;
|
||||
/** Called once when the sentinel row scrolls into view — `RecipeSourcesPanel`'s own re-entrancy guard (not this component) is what keeps a still-visible sentinel from firing this repeatedly while a fetch is already in flight. */
|
||||
onLoadMore?: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
|
||||
const sentinelRef = useRef<HTMLTableRowElement | null>(null);
|
||||
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: `onLoadMore` is deliberately excluded — RecipeSourcesPanel passes a fresh function identity on every render, and re-subscribing the observer on every single render (rather than only when hasMore actually flips) would be wasteful busywork for no behavioral difference.
|
||||
useEffect(() => {
|
||||
const root = scrollContainerRef.current;
|
||||
const sentinel = sentinelRef.current;
|
||||
if (!hasMore || !onLoadMore || !root || !sentinel) return;
|
||||
|
||||
// `rootMargin` starts loading the next page slightly before the
|
||||
// sentinel actually reaches the visible edge — combined with
|
||||
// RecipeSourcesPanel's own prefetch-ahead-of-time, the goal is that a
|
||||
// page finishes arriving before anyone actually scrolls far enough to
|
||||
// need it, not just "as soon as" they do.
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries.some((entry) => entry.isIntersecting)) onLoadMore();
|
||||
},
|
||||
{ root, rootMargin: "200px 0px" },
|
||||
);
|
||||
observer.observe(sentinel);
|
||||
return () => observer.disconnect();
|
||||
}, [hasMore]);
|
||||
|
||||
return (
|
||||
<div className="recipe-table-wrap">
|
||||
<div className="recipe-table-wrap" ref={scrollContainerRef}>
|
||||
<table className="recipe-table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -60,6 +107,23 @@ export function SourceItemTable({
|
|||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{hasMore && (
|
||||
<tr ref={sentinelRef} className="source-item-table__sentinel">
|
||||
<td colSpan={3} />
|
||||
</tr>
|
||||
)}
|
||||
{Array.from({ length: placeholderCount }, (_, index) => (
|
||||
// biome-ignore lint/suspicious/noArrayIndexKey: a fixed-length run of interchangeable, content-less placeholders — there's no stable identity to key on, and the count never reorders.
|
||||
<tr key={`skeleton-${index}`} className="source-item-table__row--skeleton">
|
||||
<td>
|
||||
<span className="recipe-table__photo source-item-table__photo--skeleton" />
|
||||
</td>
|
||||
<td>
|
||||
<span className="source-item-table__skeleton-bar" />
|
||||
</td>
|
||||
<td />
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -184,10 +184,11 @@
|
|||
"sources": {
|
||||
"searchPlaceholder": "Rechercher…",
|
||||
"empty": "Aucune recette trouvée.",
|
||||
"loadMore": "Voir plus",
|
||||
"alreadyImported": "Déjà importée",
|
||||
"loading": "Chargement…",
|
||||
"loadError": "Impossible de charger cette source pour le moment.",
|
||||
"loadMoreError": "Impossible de charger la suite pour le moment.",
|
||||
"retry": "Réessayer",
|
||||
"detail": {
|
||||
"viewSource": "Voir sur le site d'origine"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -463,6 +463,18 @@ Contenu de l'onglet d'une source : sa propre paire maître-détail —
|
|||
`nextCursor`) + `RecipeDetailPanel` pour la prévisualisation. Scopé à un seul
|
||||
`sourceKey` (prop fixe) — remonté avec `key={sourceKey}` en changeant de
|
||||
source, même convention "monté seulement tant que pertinent" que `Dialog`.
|
||||
|
||||
Pagination en scroll infini, pas de bouton "voir plus" : une ligne
|
||||
sentinelle invisible en fin de liste (`SourceItemTable`, un
|
||||
`IntersectionObserver` scopé à son propre conteneur scrollable) déclenche le
|
||||
chargement de la page suivante dès qu'elle approche du bas. `RecipeSourcesPanel`
|
||||
précharge en plus la page suivante dès que la page courante s'affiche (avant
|
||||
même que la sentinelle soit visible), pour qu'un défilement rapide tombe le
|
||||
plus souvent sur une réponse déjà arrivée. Pendant un chargement (préchargé
|
||||
ou non), des lignes squelettes qui pulsent s'ajoutent en bas de la liste
|
||||
plutôt que de laisser un vide ; un échec affiche un message avec un lien
|
||||
"Réessayer" sans effacer les lignes déjà chargées.
|
||||
|
||||
Clic sur une ligne :
|
||||
- **Déjà importé** (`alreadyImported && recipeId !== null`) : `GET
|
||||
/recipes/:id`, prévisualisé en état `"loaded"`.
|
||||
|
|
|
|||
Loading…
Reference in a new issue