feat: complete useTransition() example

Author: Simone Gentili

react/useTransition/src/App.tsx

@@ -1,22 +1,65 @@
-import { useState } from "react";
+import { useState, useTransition } from "react";
 
-function App() {
+function Container() {
   const [page, setPage] = useState("/");
+  const [isPending, startTransition] = useTransition();
+
+  function navigate(page: string) {
+    startTransition(() => {
+      setPage(page);
+    });
+  }
+
+  const renderMenu = () => {
+    return (
+      <div className="menu">
+        <button onClick={() => navigate("/")}>home</button>
+        <button onClick={() => navigate("/blog")}>blog</button>
+      </div>
+    );
+  };
+
+  const renderLoading = () => {
+    return (
+      <>
+        {renderMenu()}
+        <div className="loading">loading ...</div>
+      </>
+    );
+  };
+
+  const renderPage = (page: string) => {
+    if (page == "/") return <HomePage />;
+    if (page == "/blog") return <BlogPage />;
+  };
+
+  if (isPending) return renderLoading();
 
   return (
     <>
-      <h1>useTransaction()</h1>
-
-      <button onClick={() => setPage("/")}>home</button>
-      <button onClick={() => setPage("/blog")}>blog</button>
+      {renderMenu()}
+      {renderPage(page)}
+    </>
+  );
+}
 
-      {page === "/" && <HomePage />}
-      {page === "/blog" && <BlogPage />}
+function App() {
+  return (
+    <>
+      <h1>useTransaction()</h1>
+      <Container />
     </>
   );
 }
 
+function delay(sec: number) {
+  let startTime = performance.now();
+  while (performance.now() - startTime < sec * 1000) {}
+}
+
 function HomePage() {
+  delay(0.6);
+
   return (
     <>
       <h2>Homepage</h2>
@@ -25,6 +68,8 @@ function HomePage() {
 }
 
 function BlogPage() {
+  delay(0.5);
+
   return (
     <>
       <h2>Blog!</h2>