client/web: move useNodeData out of App component

Only loading data once auth request has completed.

Updates tailscale/corp#14335

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>

client/web/src/components/app.tsx

@@ -13,16 +13,35 @@ import DeviceDetailsView from "./views/device-details-view"
 
 export default function App() {
   const { data: auth, loading: loadingAuth, newSession } = useAuth()
+
+  return (
+    <main className="min-w-sm max-w-lg mx-auto py-14 px-5">
+      {loadingAuth ? (
+        <div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view
+      ) : (
+        <WebClient auth={auth} newSession={newSession} />
+      )}
+    </main>
+  )
+}
+
+function WebClient({
+  auth,
+  newSession,
+}: {
+  auth?: AuthResponse
+  newSession: () => Promise<void>
+}) {
   const { data, refreshData, updateNode } = useNodeData()
   useEffect(() => {
     refreshData()
   }, [auth, refreshData])
 
+  if (!data) {
+    return <div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view
+  }
+
   return (
-    <main className="min-w-sm max-w-lg mx-auto py-14 px-5">
-      {loadingAuth || !data ? (
-        <div className="text-center py-14">Loading...</div> // TODO(sonia): add a loading view
-      ) : (
     <>
       {/* TODO(sonia): get rid of the conditions here once full/readonly
        * views live on same components */}
@@ -52,8 +71,6 @@ export default function App() {
         </Route>
       </Switch>
     </>
-      )}
-    </main>
   )
 }