[Issue #352]: React suspense example

app/src/app/[locale]/suspense/InstantLoadGreeting.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const InstantLoadGreeting = () => {
+  return <h3>This should load instantly!</h3>;
+};
+
+export default InstantLoadGreeting;

app/src/app/[locale]/suspense/Todos1SecLoad.tsx

@@ -0,0 +1,23 @@
+import { getTodos } from "./Todos2SecLoad";
+
+interface Todo {
+  userId: number;
+  id: number;
+  title: string;
+  completed: boolean;
+}
+
+export default async function Todos1SecLoad() {
+  const todos: Todo[] = await getTodos(1000);
+
+  return (
+    <div>
+      <h2>Todos</h2>
+      <ul>
+        {todos.slice(0, 10).map((todo) => (
+          <li key={todo.id}>{todo.title}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

app/src/app/[locale]/suspense/Todos2SecLoad.tsx

@@ -0,0 +1,27 @@
+interface Todo {
+  userId: number;
+  id: number;
+  title: string;
+  completed: boolean;
+}
+
+export async function getTodos(delay: number) {
+  await new Promise((resolve) => setTimeout(resolve, delay));
+  const response = await fetch("https://jsonplaceholder.typicode.com/todos");
+  const data = (await response.json()) as Todo[];
+  return data;
+}
+export default async function Todos2SecLoad() {
+  const todos: Todo[] = await getTodos(2000);
+
+  return (
+    <div>
+      <h2>Todos</h2>
+      <ul>
+        {todos.slice(0, 10).map((todo) => (
+          <li key={todo.id}>{todo.title}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

app/src/app/[locale]/suspense/loader.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+const Loader = ({ message }: { message: string }) => <h4>{message}</h4>;
+
+export default Loader;

app/src/app/[locale]/suspense/page.tsx

@@ -0,0 +1,33 @@
+import { useTranslations } from "next-intl";
+import React, { Suspense } from "react";
+
+import InstantLoadGreeting from "./InstantLoadGreeting";
+import Loader from "./loader";
+import Todos1SecLoad from "./Todos1SecLoad";
+import Todos2SecLoad from "./Todos2SecLoad";
+
+export default function Page() {
+  const t = useTranslations("suspense");
+  return (
+    <>
+      <h1>{t("title")}</h1>
+      <InstantLoadGreeting />
+      <div className="grid-row grid-gap">
+        <div className="tablet:grid-col-6">
+          <Suspense
+            fallback={<Loader message="This should take 1 second to load" />}
+          >
+            <Todos1SecLoad />
+          </Suspense>
+        </div>
+        <div className="tablet:grid-col-6">
+          <Suspense
+            fallback={<Loader message="This should take 2 seconds to load" />}
+          >
+            <Todos2SecLoad />
+          </Suspense>
+        </div>
+      </div>
+    </>
+  );
+}

app/src/i18n/messages/en-US/index.ts

@@ -26,4 +26,7 @@ export const messages = {
     formatting:
       "The template includes an internationalization library with basic formatters built-in. Such as numbers: { amount, number, currency }, and dates: { isoDate, date, long}.",
   },
+  suspense: {
+    title: "Suspense Example",
+  },
 };