feat(stream): friendlier pagination loading + error retry
All checks were successful
Deploy to Frontend Servers / deploy (push) Successful in 29s

- Replace the bare '…' loading dots at the bottom of the post stream
  with a skeleton bubble that matches the initial-load placeholders, so
  pagination feels like content arriving instead of a frozen indicator.
- Localize the retry control via new 'retry' / 'loadMoreFailed' keys
  across all 7 locales and surface a user-friendly error string instead
  of the raw exception message.
- Retry button now picks reset() vs loadMore() based on item count so a
  pagination failure only refetches the next page, not the whole stream.
- When a banner deep-link can't find its target post and pagination
  errors, break out of the retry loop and release the scroll lock so the
  user sees the inline retry instead of an endless freeze.

Verified in the browser: zh-CN renders '加载更多资料失败,请检查网络后重试。'
with a '重试' button; banner clicks with empty / '#' / 'javascript:' /
null linkUrls render no anchor and do not navigate.
This commit is contained in:
TerryM
2026-06-02 11:39:17 +08:00
parent 7ed9f8c8bf
commit 387b25f1e3
8 changed files with 42 additions and 9 deletions

View File

@@ -31,7 +31,7 @@ export function MessageStream({ scope }: MessageStreamProps) {
const { items, isLoading, error, hasMore, loadMore, reset } =
usePostStream(params);
const groups = useGroupedByDay(items, lang);
const retryLabel = lang === "zh-CN" ? "重试" : "Retry";
const retryLabel = t("retry");
const sentinelRef = useRef<HTMLDivElement>(null);
const filterBarRef = useRef<HTMLDivElement>(null);
@@ -213,10 +213,17 @@ export function MessageStream({ scope }: MessageStreamProps) {
return;
}
// Not loaded yet — keep paging until it appears or the stream is exhausted.
// Not loaded yet — keep paging until it appears or the stream is
// exhausted. If the previous loadMore errored, stop the loop so the user
// sees the inline retry button instead of an endless retry cycle, and
// release the scroll lock so they can interact with the page.
if (error) {
setIsAligningQueryTarget(false);
return;
}
if (hasMore && !isLoading) loadMore();
else if (!hasMore && !isLoading) setIsAligningQueryTarget(false);
}, [targetPostId, items, hasMore, isLoading, loadMore]);
}, [targetPostId, items, hasMore, isLoading, error, loadMore]);
const updateParam = (key: string, value: string) => {
const n = new URLSearchParams(sp);
@@ -273,20 +280,29 @@ export function MessageStream({ scope }: MessageStreamProps) {
) : null}
{error ? (
<div className="my-4 flex items-center justify-between gap-3 rounded-xl border border-red-900 bg-red-950/40 px-4 py-3 text-sm text-red-200">
<span className="break-all">{error}</span>
<div
role="alert"
className="my-4 flex flex-col gap-3 rounded-xl border border-red-900 bg-red-950/40 px-4 py-3 text-sm text-red-200 sm:flex-row sm:items-center sm:justify-between"
>
<span className="break-words">{t("loadMoreFailed")}</span>
<button
type="button"
onClick={() => reset()}
className="shrink-0 rounded-full border border-red-700 px-3 py-1 text-xs text-red-100 hover:border-red-500"
onClick={() => (items.length === 0 ? reset() : loadMore())}
className="shrink-0 self-start rounded-full border border-red-700 px-3 py-1 text-xs text-red-100 hover:border-red-500 sm:self-auto"
>
{retryLabel}
</button>
</div>
) : null}
{isLoading ? (
<div className="py-4 text-center text-xs text-neutral-500"></div>
{isLoading && !error ? (
<div
aria-live="polite"
aria-label={t("loading")}
className="mx-auto w-full max-w-[358px] md:max-w-[680px] lg:max-w-[900px] xl:max-w-[1120px]"
>
<Skeleton className="h-[80px] rounded-2xl" />
</div>
) : null}
</>
)}