Add loading state

lmatteis · Aug 8, 2023 · ea8e8d2 · ea8e8d2
1 parent 4334f7d
commit ea8e8d2
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 18 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -4,8 +4,8 @@ const App = () => {
  return (
  <div className="App">
  <h2>
- Infinite scroll streaming chunks of React Server Components using{" "}
- <a href="https://waku.gg/">Waku</a>
+ Infinite scroll by streaming chunks via recursive renders of React
+ Server Components using <a href="https://waku.gg/">Waku</a>
  </h2>
  <p>
  You can find the code explanation{" "}

diff --git a/src/components/Chunk.tsx b/src/components/Chunk.tsx
@@ -5,27 +5,29 @@ function randomIntFromInterval(min: number, max: number) {
  return Math.floor(Math.random() * (max - min + 1) + min);
 }
 
-const timeout = (resolve: any) =>
+const randomTimeout = (resolve: any) =>
  setTimeout(resolve, randomIntFromInterval(0, 2000));
 
 function createStream(page: number) {
  const stream = new ReadableStream({
  async start(controller) {
  // push 5 items at random intervals
- await new Promise(timeout);
+ await new Promise(randomTimeout);
  controller.enqueue(1 + 5 * (page - 1));
 
- await new Promise(timeout);
+ await new Promise(randomTimeout);
  controller.enqueue(2 + 5 * (page - 1));
 
- await new Promise(timeout);
+ await new Promise(randomTimeout);
  controller.enqueue(3 + 5 * (page - 1));
 
- await new Promise(timeout);
+ await new Promise(randomTimeout);
  controller.enqueue(4 + 5 * (page - 1));
 
- await new Promise(timeout);
+ await new Promise(randomTimeout);
  controller.enqueue(5 + 5 * (page - 1));
+
+ controller.close();
  },
  pull(controller) {
  // We don't really need a pull in this example
@@ -42,7 +44,9 @@ function createStream(page: number) {
 async function Token({ reader }: { reader: ReadableStreamDefaultReader }) {
  const { done, value } = await reader.read();
 
- if (done) return null;
+ if (done) {
+ return null;
+ }
 
  return (
  <>
@@ -54,7 +58,7 @@ async function Token({ reader }: { reader: ReadableStreamDefaultReader }) {
 
 function RecursiveReader({ reader }: { reader: ReadableStreamDefaultReader }) {
  return (
- <Suspense fallback="wat">
+ <Suspense fallback={<p>Loading...</p>}>
  <Token reader={reader} />
  </Suspense>
  );

diff --git a/src/components/MoreButton.tsx b/src/components/MoreButton.tsx
@@ -6,14 +6,11 @@ import { serve } from "waku/client";
 const Chunk = serve<{ page: number }>("Chunk");
 
 export function MoreButton() {
- const [isPending, startTransition] = useTransition();
  const [page, setPage] = useState(1);
 
  function handleClick() {
- startTransition(() => {
- setPage((p) => {
- return p + 1;
- });
+ setPage((p) => {
+ return p + 1;
  });
  }
 
@@ -24,9 +21,7 @@ export function MoreButton() {
  return <Chunk page={pageIdx + 1} key={pageIdx} />;
  })}
  </div>
- <button onClick={handleClick}>
- {isPending ? "Loading..." : "More Posts"}
- </button>
+ <button onClick={handleClick}>More Posts</button>
  </div>
  );
 }