0

Code:

const App = () => {
  const { account } = useWeb3React()

  return (
    {account
      ? <Dasboard/>
      : <HomePage/>
    }
  )

}

Issue:

The account does not come immediately, but after about half a second, because of this there is a blinking of the interface. While there is no account, the HomePage component is shown for a second, then the Dashboard is shown. How do I fix this? If account false I always must render HomePage.

happy_cutman
  • 17
  • 6
  • Don't show anything until you know if there is an account or not. Then you can show the correct one immediately. – asynts Sep 14 '22 at 12:13
  • While there is no account, I need to always show HomePage – happy_cutman Sep 14 '22 at 12:14
  • Yes, but if I understand you correctly, there is a brief moment where you don't know. You can create a placeholder loading screen until you know for certain and then use the correct component. – asynts Sep 14 '22 at 12:16
  • It's not all so clear-cut. If I insert the loader and try to wait for the account to arrive, the account is undefined twice and the loader remains, the other components are not rendered. – happy_cutman Sep 14 '22 at 12:22
  • So your question is really: "How to distinguish if a user has no account or if the account is still being loaded by external library X?" – asynts Sep 14 '22 at 12:29
  • 1
    I try to reproduce it on codesandbox – happy_cutman Sep 14 '22 at 12:29

1 Answers1

0

you can implement some kind of spinner:


const App = () => {

 if(loading) return <Spinner />

  return (
    {account
      ? <Dasboard/>
      : <HomePage/>
    }
  )

}
Wraithy
  • 1,722
  • 1
  • 5
  • 13
  • Yes I thought of that, but the account comes back from the library hook and I can't track its loading ```const { account } = useWeb3React();``` – happy_cutman Sep 14 '22 at 12:13
  • there is some answer that implements loading functionality [here](https://stackoverflow.com/questions/68345619/how-to-keep-metamask-connection-to-the-ui-persistent-with-web3-react) but i am not much experienced with web3 sorry – Wraithy Sep 14 '22 at 12:31
  • I saw that answer, but thanks anyway! – happy_cutman Sep 14 '22 at 12:38