fix(downloads): GIF review round 2 — cap as sent, shown length, retry, Join reason

The panels judge a GIF's length in whole milliseconds between the ends as sent, the server's own rule, and a refused length reads rounded up. A shared picture says it failed only once its retry failed too. Join's reason shows on a key's focus; the editor's failure toasts name GIFs. The edit route's cap is test-held, and DESIGN.md records the GIF UI.
This commit is contained in:
2026-11-13 00:19:53 +01:00
parent 8845d1aa49
commit fe6af1445f
12 changed files with 200 additions and 43 deletions
+8 -2
View File
@@ -12,7 +12,8 @@ import { useEffect, useState, type ImgHTMLAttributes, type ReactNode } from "rea
// `r` parameter (measured 2026-10-14). A 429 from a burst of cards heals this way.
// - While there is no picture — none given, a retry still waiting, every retry spent — the caller's
// `fallback` stands in (nothing by default: the card's own empty frame, which is what a card with no
// thumbnail has always shown). Never the broken-image mark.
// thumbnail has always shown), or its `pending` while a retry waits when the fallback says the
// picture failed. Never the broken-image mark.
// - The failure is remembered BY URL, in render: these sit in virtualized grids whose slots are recycled,
// and a failure stored as a flag an effect resets painted one item's fallback over the next one's
// picture for a frame (ui/Avatar had that defect).
@@ -47,6 +48,7 @@ export default function RemoteImage({
src,
srcSet,
fallback = null,
pending = fallback,
retries = IMAGE_RETRIES,
...img
}: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "srcSet" | "onError" | "referrerPolicy"> & {
@@ -54,6 +56,9 @@ export default function RemoteImage({
srcSet?: string;
/** What stands in while there is no picture. */
fallback?: ReactNode;
/** What stands in while a retry waits, when that is not the fallback: a fallback that says the
* picture failed would say it of one that may still come. */
pending?: ReactNode;
/** Fewer retries for a picture whose failure is an answer, not a hiccup — a file that is not there
* yet is better shown as its fallback now than after seven seconds of retries. */
retries?: number;
@@ -75,7 +80,8 @@ export default function RemoteImage({
}, [waiting, attempt, src]);
const spent = current !== null && !current.waiting && current.attempt > retries;
if (!src || waiting || spent) return <>{fallback}</>;
if (waiting && src) return <>{pending}</>;
if (!src || spent) return <>{fallback}</>;
return (
// eslint-disable-next-line no-restricted-syntax -- the one <img> the rest of the app goes through
<img