From 44f2cb229b477e963f12f6e6486233677708c07b Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Thu, 12 Feb 2026 12:34:44 +0400
Subject: [PATCH] add loading.tsx for route level suspense boundary

---
 app/(home-pages)/reader/GlobalContent.tsx |  8 +-------
 app/(home-pages)/reader/hot/page.tsx      |  8 +-------
 app/(home-pages)/reader/loading.tsx       |  4 ++++
 app/(home-pages)/reader/new/page.tsx      |  8 +-------
 app/(home-pages)/reader/page.tsx          |  8 +-------
 components/PostListing.tsx                | 20 ++++++++++++++------
 6 files changed, 22 insertions(+), 34 deletions(-)
 create mode 100644 app/(home-pages)/reader/loading.tsx

diff --git a/app/(home-pages)/reader/GlobalContent.tsx b/app/(home-pages)/reader/GlobalContent.tsx
index a31d7daa..53cf2462 100644
--- a/app/(home-pages)/reader/GlobalContent.tsx
+++ b/app/(home-pages)/reader/GlobalContent.tsx
@@ -14,7 +14,7 @@ export const GlobalContent = (props: {
 }) => {
   const initialData = use(props.promise);
 
-  const { data, isLoading } = useSWR(
+  const { data } = useSWR(
     "hot_feed",
     async () => {
       const res = await callRPC("get_hot_feed", {});
@@ -27,12 +27,6 @@ export const GlobalContent = (props: {
 
   const posts = data?.posts ?? [];
 
-  if (isLoading) {
-    return (
-      <div className="text-center text-tertiary py-8">Loading posts...</div>
-    );
-  }
-
   if (posts.length === 0) {
     return (
       <div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center text-tertiary">
diff --git a/app/(home-pages)/reader/hot/page.tsx b/app/(home-pages)/reader/hot/page.tsx
index 70da6d98..3e0430b2 100644
--- a/app/(home-pages)/reader/hot/page.tsx
+++ b/app/(home-pages)/reader/hot/page.tsx
@@ -1,13 +1,7 @@
-import { Suspense } from "react";
 import { getHotFeed } from "../getHotFeed";
 import { GlobalContent } from "../GlobalContent";
-import { FeedSkeleton } from "../FeedSkeleton";
 
 export default async function HotPage() {
   const feedPromise = getHotFeed();
-  return (
-    <Suspense fallback={<FeedSkeleton />}>
-      <GlobalContent promise={feedPromise} />
-    </Suspense>
-  );
+  return <GlobalContent promise={feedPromise} />;
 }
diff --git a/app/(home-pages)/reader/loading.tsx b/app/(home-pages)/reader/loading.tsx
new file mode 100644
index 00000000..06773957
--- /dev/null
+++ b/app/(home-pages)/reader/loading.tsx
@@ -0,0 +1,4 @@
+import { FeedSkeleton } from "./FeedSkeleton";
+export default function Loading() {
+  return <FeedSkeleton />;
+}
diff --git a/app/(home-pages)/reader/new/page.tsx b/app/(home-pages)/reader/new/page.tsx
index 264c0f2a..c857832f 100644
--- a/app/(home-pages)/reader/new/page.tsx
+++ b/app/(home-pages)/reader/new/page.tsx
@@ -1,13 +1,7 @@
-import { Suspense } from "react";
 import { getNewFeed } from "../getNewFeed";
 import { NewContent } from "../NewContent";
-import { FeedSkeleton } from "../FeedSkeleton";
 
 export default async function NewPage() {
   const feedPromise = getNewFeed();
-  return (
-    <Suspense fallback={<FeedSkeleton />}>
-      <NewContent promise={feedPromise} />
-    </Suspense>
-  );
+  return <NewContent promise={feedPromise} />;
 }
diff --git a/app/(home-pages)/reader/page.tsx b/app/(home-pages)/reader/page.tsx
index b5d524ce..67a95a0c 100644
--- a/app/(home-pages)/reader/page.tsx
+++ b/app/(home-pages)/reader/page.tsx
@@ -1,13 +1,7 @@
-import { Suspense } from "react";
 import { getReaderFeed } from "./getReaderFeed";
 import { InboxContent } from "./InboxContent";
-import { FeedSkeleton } from "./FeedSkeleton";
 
 export default async function Reader() {
   const feedPromise = getReaderFeed();
-  return (
-    <Suspense fallback={<FeedSkeleton />}>
-      <InboxContent promise={feedPromise} />
-    </Suspense>
-  );
+  return <InboxContent promise={feedPromise} />;
 }
diff --git a/components/PostListing.tsx b/components/PostListing.tsx
index 1a431fb9..eab53063 100644
--- a/components/PostListing.tsx
+++ b/components/PostListing.tsx
@@ -11,6 +11,7 @@ import type {
 import type { Post } from "app/(home-pages)/reader/getReaderFeed";
 
 import Link from "next/link";
+import { useEffect, useRef, useState } from "react";
 import { InteractionPreview, TagPopover } from "./InteractionsPreview";
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 import { useSmoker } from "./Toast";
@@ -42,13 +43,19 @@ export const PostListing = (props: Post) => {
   let isStandalone = !pubRecord;
   let theme = usePubTheme(pubRecord?.theme || postRecord?.theme, isStandalone);
   let themeRecord = pubRecord?.theme || postRecord?.theme;
-  let el = document?.getElementById(`post-listing-${postUri}`);
+  let elRef = useRef<HTMLDivElement>(null);
+  let [hasBackgroundImage, setHasBackgroundImage] = useState(false);
 
-  let hasBackgroundImage =
-    !!themeRecord?.backgroundImage?.image &&
-    el &&
-    Number(window.getComputedStyle(el).getPropertyValue("--bg-page-alpha")) <
-      0.7;
+  useEffect(() => {
+    if (!themeRecord?.backgroundImage?.image || !elRef.current) {
+      setHasBackgroundImage(false);
+      return;
+    }
+    let alpha = Number(
+      window.getComputedStyle(elRef.current).getPropertyValue("--bg-page-alpha"),
+    );
+    setHasBackgroundImage(alpha < 0.7);
+  }, [themeRecord?.backgroundImage?.image]);
 
   let backgroundImage =
     themeRecord?.backgroundImage?.image?.ref && uri
@@ -82,6 +89,7 @@ export const PostListing = (props: Post) => {
     <div className="postListing flex flex-col gap-1">
       <BaseThemeProvider {...theme} local>
         <div
+          ref={elRef}
           id={`post-listing-${postUri}`}
           className={`
           relative
-- 
2.51.2