le8i2digy: Keep the posts and show an inline error when a refresh fails

src/components/Feed.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { fetchFeedPage, FeedLoadError } from "@/lib/feed-client";
 import { applyLikeOutcome, LikeError, sendLike } from "@/lib/like-client";
-import { mergePosts, toCardPosts, upgradeVideos, type CardPost } from "@/lib/feed-model";
+import { firstLoadFailure, mergePosts, toCardPosts, upgradeVideos, type CardPost } from "@/lib/feed-model";
 import { PostError, publishAndConfirm } from "@/lib/post-client";
 import { DeleteError, sendDelete } from "@/lib/delete-client";
 import type { ComposerProps } from "./Composer";
@@ -26,6 +26,7 @@ export function Feed({
   const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [loadingMore, setLoadingMore] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
+  const [refreshFailed, setRefreshFailed] = useState(false);
   const [loadMoreFailed, setLoadMoreFailed] = useState(false);
   const [pending, setPending] = useState<CardPost[]>([]);
   const [likeBusy, setLikeBusy] = useState<ReadonlySet<string>>(new Set());
@@ -59,6 +60,7 @@ export function Feed({
   const loadFirst = useCallback(async (quiet = false) => {
     if (busy.current) return;
     busy.current = true;
+    setRefreshFailed(false);
     if (quiet) setRefreshing(true);
     else setStatus("loading");
     setLoadMoreFailed(false);
@@ -70,7 +72,9 @@ export function Feed({
       setStatus("ready");
     } catch (e) {
       fail(e);
-      setStatus("error");
+      const out = firstLoadFailure(quiet);
+      if (out.fullError) setStatus("error");
+      setRefreshFailed(out.refreshFailed);
     } finally {
       busy.current = false;
       setRefreshing(false);
@@ -262,6 +266,7 @@ export function Feed({
       onShowNew={showNew}
       onRefresh={refresh}
       refreshing={refreshing}
+      refreshFailed={refreshFailed}
       onToggleLike={(p) => void toggleLike(p)}
       likeBusy={likeBusy}
       likeErrors={likeErrors}

src/components/FeedView.tsx

@@ -17,6 +17,8 @@ export interface FeedViewProps {
   /** Reloads the first page; the header shows the button when it is given. */
   onRefresh?: () => void;
   refreshing?: boolean;
+  /** The last refresh failed; the posts stay and a small message shows in the header. */
+  refreshFailed?: boolean;
   onToggleLike?: (post: CardPost) => void;
   likeBusy?: ReadonlySet<string>;
   likeErrors?: ReadonlySet<string>;
@@ -87,11 +89,12 @@ export function RefreshButton({ onRefresh, busy }: { onRefresh: () => void; busy
   );
 }
 
-function FeedPanel({ children, composer, onRefresh, busy }: { children: ReactNode; composer?: ReactNode; onRefresh?: () => void; busy?: boolean }) {
+function FeedPanel({ children, composer, onRefresh, busy, refreshFailed }: { children: ReactNode; composer?: ReactNode; onRefresh?: () => void; busy?: boolean; refreshFailed?: boolean }) {
   return (
     <section className="tile panel feed" aria-labelledby="h-feed">
       <div className="panel-head feed-head">
         <h2 id="h-feed" className="type-title type-title-strong">Home feed</h2>
+        {refreshFailed ? <span className="feed-refresh-error" role="alert">Could not refresh. Try again.</span> : null}
         {onRefresh ? <RefreshButton onRefresh={onRefresh} busy={busy} /> : null}
       </div>
       {composer}
@@ -121,7 +124,7 @@ export function FeedView(p: FeedViewProps) {
     );
   }
   return (
-    <FeedPanel composer={p.composer ? <Composer {...p.composer} /> : null} onRefresh={p.onRefresh} busy={p.refreshing}>
+    <FeedPanel composer={p.composer ? <Composer {...p.composer} /> : null} onRefresh={p.onRefresh} busy={p.refreshing} refreshFailed={p.refreshFailed}>
       <div ref={p.listRef} className="feed-list panel-scroll fade-edges">
         {p.newCount > 0 ? (
           <div className="feed-pill">