From 28980147559e651bbb3dba85a64b685cf008f0d7 Mon Sep 17 00:00:00 2001
From: Ryan Lewis <ryanlewis@navapbc.com>
Date: Mon, 24 Jun 2024 11:37:35 -0700
Subject: [PATCH] suspense example

---
 .../[locale]/suspense/InstantLoadGreeting.tsx |  7 ++++
 .../app/[locale]/suspense/Todos1SecLoad.tsx   | 23 +++++++++++++
 .../app/[locale]/suspense/Todos2SecLoad.tsx   | 27 +++++++++++++++
 app/src/app/[locale]/suspense/loader.tsx      |  5 +++
 app/src/app/[locale]/suspense/page.tsx        | 33 +++++++++++++++++++
 app/src/i18n/messages/en-US/index.ts          |  3 ++
 6 files changed, 98 insertions(+)
 create mode 100644 app/src/app/[locale]/suspense/InstantLoadGreeting.tsx
 create mode 100644 app/src/app/[locale]/suspense/Todos1SecLoad.tsx
 create mode 100644 app/src/app/[locale]/suspense/Todos2SecLoad.tsx
 create mode 100644 app/src/app/[locale]/suspense/loader.tsx
 create mode 100644 app/src/app/[locale]/suspense/page.tsx

diff --git a/app/src/app/[locale]/suspense/InstantLoadGreeting.tsx b/app/src/app/[locale]/suspense/InstantLoadGreeting.tsx
new file mode 100644
index 00000000..a0185371
--- /dev/null
+++ b/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;
diff --git a/app/src/app/[locale]/suspense/Todos1SecLoad.tsx b/app/src/app/[locale]/suspense/Todos1SecLoad.tsx
new file mode 100644
index 00000000..f1842027
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/src/app/[locale]/suspense/Todos2SecLoad.tsx b/app/src/app/[locale]/suspense/Todos2SecLoad.tsx
new file mode 100644
index 00000000..84c90e1d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/src/app/[locale]/suspense/loader.tsx b/app/src/app/[locale]/suspense/loader.tsx
new file mode 100644
index 00000000..852abf31
--- /dev/null
+++ b/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;
diff --git a/app/src/app/[locale]/suspense/page.tsx b/app/src/app/[locale]/suspense/page.tsx
new file mode 100644
index 00000000..f761ad4d
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/app/src/i18n/messages/en-US/index.ts b/app/src/i18n/messages/en-US/index.ts
index 5e856e07..a950d214 100644
--- a/app/src/i18n/messages/en-US/index.ts
+++ b/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",
+  },
 };