[React]: enhance useTransition() example

Author: sensorario

react/useTransition/package-lock.json

@@ -10,9 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.0.0-rc-cc1ec60d0d-20240607",
-    "react-dom": "^19.0.0-rc-cc1ec60d0d-20240607",
-    "sensorario-design-system": "^1.0.11"
+    "react": "^19.0.0-rc-c21bcd627b-20240624",
+    "react-dom": "^19.0.0-rc-c21bcd627b-20240624",
+    "sensorario-design-system": "github:sensorario/sensorario-design-system#main"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

react/useTransition/package.json

@@ -1,79 +1,63 @@
 import { useState, useTransition } from "react";
 import "sensorario-design-system/style/index.css";
 
-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 (
-    <>
-      {renderMenu()}
-      {renderPage(page)}
-    </>
-  );
-}
-
-function App() {
-  return (
-    <div className="sensorario-container">
-      <h1>useTransition()</h1>
-      <Container />
-    </div>
-  );
-}
-
 function delay(sec: number) {
   let startTime = performance.now();
   while (performance.now() - startTime < sec * 1000) {}
 }
 
-function HomePage() {
+const Home = () => {
   delay(0.6);
 
   return (
-    <div className="sensorario-container">
-      <h2>Homepage</h2>
+    <div className="componente-home">
+      <h1>Homepage</h1>
     </div>
   );
-}
+};
 
-function BlogPage() {
-  delay(0.5);
+const Blog = () => {
+  delay(1);
 
   return (
-    <div className="sensorario-container">
-      <h2>Blog!</h2>
+    <div className="componente-home">
+      <h1>Il mio blog</h1>
+      <ul>
+        <li>Post #1</li>
+        <li>Post #2</li>
+        <li>Post #3</li>
+      </ul>
+    </div>
+  );
+};
+
+function App() {
+  const [page, setPage] = useState("/");
+  const [isPending, startTransition] = useTransition();
+
+  function navigate(page: string) {
+    startTransition(() => {
+      setPage(page);
+    });
+  }
+
+  return (
+    <div className="sensorario-container light">
+      <h1>useTransition()</h1>
+      <div className="button-menu">
+        <div className="pagina-corrente">pagina corrente: {page}</div>
+        <button disabled={isPending} onClick={() => navigate("/")}>
+          home
+        </button>
+        <button disabled={isPending} onClick={() => navigate("/blog")}>
+          blog
+        </button>
+        <div className="pagina">
+          {isPending && "loading ..."}
+          {page === "/" && <Home />}
+          {page === "/blog" && <Blog />}
+        </div>
+      </div>
     </div>
   );
 }

react/useTransition/src/App.tsx

@@ -1,10 +1,5 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "sensorario-design-system/style/index.css";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);