From 5abf75f12f0962a5afdaf28f7712731756c0d3a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?=
 <osergiosiqueira@gmail.com>
Date: Fri, 21 Feb 2025 11:12:53 -0300
Subject: [PATCH] add sleep

---
 dashboard_js/app/layouts/app.tsx        |  9 +++++----
 dashboard_js/app/routes/users/index.tsx | 13 ++++++++++++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/dashboard_js/app/layouts/app.tsx b/dashboard_js/app/layouts/app.tsx
index 57d2997..9a59566 100644
--- a/dashboard_js/app/layouts/app.tsx
+++ b/dashboard_js/app/layouts/app.tsx
@@ -1,8 +1,11 @@
-import { Suspense } from "react";
+import { useNavigation } from "react-router";
 import { Link } from "react-router";
 import { Outlet } from "react-router";
 
 export default function Layout() {
+  const navigation = useNavigation();
+  const isNavigating = Boolean(navigation.location);
+
   return (
     <>
       <ul>
@@ -13,9 +16,7 @@ export default function Layout() {
         </li>
       </ul>
 
-      <Suspense fallback={<div>Loading...</div>}>
-        <Outlet />
-      </Suspense>
+      {isNavigating ? <>Loading...</> : <Outlet />}
     </>
   );
 }
diff --git a/dashboard_js/app/routes/users/index.tsx b/dashboard_js/app/routes/users/index.tsx
index 9322d56..676f14b 100644
--- a/dashboard_js/app/routes/users/index.tsx
+++ b/dashboard_js/app/routes/users/index.tsx
@@ -1,3 +1,14 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+
 export default function Component() {
-  return <>users index</>
+  const info = useSuspenseQuery({
+    queryKey: ["todos"],
+    queryFn: async () => {
+      await new Promise((r) => setTimeout(r, 3000));
+      return { data: "todos" };
+    },
+  });
+
+  console.log(info);
+  return <>users index</>;
 }