import { Outlet } from 'react-router'
import AppHeader from './AppHeader'
import './AppLayout.scss'
import { useUserQuery, useMapQuery } from '@/hooks/useQuery'

export default function AppLayout() {
  const { isPending: queryUserIsPending } = useUserQuery()
  const { isPending: queryMapIsPending } = useMapQuery()
  if (queryUserIsPending || queryMapIsPending) {
    return
  }
  return (
    <div className="app-layout">
      <AppHeader />
      <div className="app-layout-container">
        <Outlet />
      </div>
    </div>
  )
}
