Waiting for addressData to load

[codedbyjordan]

Hello! I'm trying to create a protected route that doesn't allow a visitor to access it unless they have their wallet connected. Currently what I have doesn't work, as I am unsure of how I can wait until addressData loads. I see in the source code that loading updates based on ENS.

Here's what I currently have

export type ProtectedRouteProps = {
  children: React.ReactNode
}

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
  const [{ data: accountData, loading }, disconnect] = useAccount({
    fetchEns: true,
  })

  const { push } = useRouter()
  useEffect(() => {
    if (!loading && accountData?.address) push('/')
  }, [loading])

  return (
    <div>{!loading && accountData?.address ? children : 'Not signed in'}</div>
  )
}