42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { RouterProvider, createRouter } from '@tanstack/react-router'
|
|
import { useEffect, useState } from 'react'
|
|
import { routeTree } from './routeTree.gen'
|
|
import { useAuth } from './lib/auth'
|
|
import { LoadingText } from './components/ui/skeleton'
|
|
|
|
const router = createRouter({
|
|
routeTree,
|
|
defaultPreload: 'intent',
|
|
})
|
|
|
|
declare module '@tanstack/react-router' {
|
|
interface Register {
|
|
router: typeof router
|
|
}
|
|
}
|
|
|
|
function AppInner() {
|
|
const { checkAuth } = useAuth()
|
|
const [hasChecked, setHasChecked] = useState(false)
|
|
|
|
useEffect(() => {
|
|
checkAuth().finally(() => setHasChecked(true))
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
// Only show loading text during initial auth check -- NOT on subsequent isLoading changes.
|
|
// Reacting to isLoading here would unmount the entire router tree (including LoginPage)
|
|
// every time an auth action sets isLoading, destroying all component local state.
|
|
if (!hasChecked) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-screen bg-background">
|
|
<LoadingText />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return <RouterProvider router={router} />
|
|
}
|
|
|
|
export default AppInner
|