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</>;
 }