react rendering before database data is retrieved - reactjs

Question

I'm writing an app that pulls my GitHub repos and displays certain information from them (descriptions, etc.). The app is set up so that if I am not 'initialized' (meaning I haven't sent up an account), then I am forced to the 'CreateAccount' page. The state of being 'initialized' is held in local storage. But, if anyone else wants to look at the app, they won't be 'initialized', so I need a second check to see if there is anything in the database (records for each repo). If so, then the viewer should be 'initialized' and sent to the Home page. All of this is done in the App component:
const App = () => {
const setupCtx = useContext(SetupContext);
const devCtx = useContext(DevDataContext);
// variable to control routing
let initialized = null;
if (localStorage.getItem("jtsy-signin") === "true") {
initialized = true;
} else {
API.findRepo()
.then((repo) => {
console.log('APP found 1 repo', repo)
if (repo) {
initialized = true
localStorage.setItem('jtsy-signin', 'true')
console.log('1 REPO initialized', initialized)
} else {
initialized = false;
}
})
}
useEffect(() => {
if (initialized) {
console.log('APP useEffect signin=true, redirect to Home page');
if (localStorage.getItem('jtsy-login') === 'true') {
setupCtx.updateLoggedIn();
}
// console.log('APP devUpdated', setupCtx.state.devUpdated)
if (setupCtx.state.devUpdated) {
API.getActiveDevData().then((activeDevData) => {
// console.log('APP activeDevData', activeDevData.data);
const developerData = {
developerLoginName: activeDevData.data.developerLoginName,
developerGithubID: activeDevData.data.developerGithubID,
repositories: activeDevData.data.repositories,
fname: activeDevData.data.fname,
lname: activeDevData.data.lname,
email: activeDevData.data.email,
linkedInLink: activeDevData.data.linkedInLink,
resumeLink: activeDevData.data.resumeLink,
active: true
}
console.log('APP after DB call', developerData)
devCtx.updateDev(developerData)
setupCtx.updateInitialized();
setupCtx.updateDevUpdated(false)
})
}
};
}, [setupCtx.state.devUpdated])
return (
<div className='App'>
<React.Fragment>
<Router>
<Switch>
{console.log('IN APP SWITCH initialized', initialized)}
{initialized ? (
<Route exact path="/" component={Home} />
) : (
<Route exact path="/" component={CreateAccountComp} />
)}
<Route exact path="/contact" component={Contact} />
<Route exact path="/about" component={About} />
<Route exact path="/developer" component={Developer} />
<Route exact path="/login" component={LoginModal} />
<Route exact path="/logout" component={LogoutModal} />
<Route exact path="/signin" component={CreateAccountComp} />
<Route exact path="/settings" component={Settings} />
<Route component={NoMatch} />
</Switch>
</Router>
</React.Fragment>
</div >
);
};
export default App;
The variable 'initialized' controls whether the Home or CreateAccount pages are rendered. As the code shows, first local storage is checked, and if there is a value there, 'initialized' is set to 'true' and the Home page renders. This works fine. But, if there is no value in local storage, I next call findRepo(), which executes a .findOne() in the Mongo database. Then, the value of 'initialized' is set accordingly. The delay in getting a response from the database is too long. If there is no value in local storage, initialized is 'null' when rendering occurs, so the app always goes to the "CreateAccount" page. I can tell that the database call is responding properly and initialized is getting set to 'true', but it's too late (CreateAccount is already rendered).
I tried putting the database call inside of useEffect, and in a separate useEffect, but neither worked. I need a better approach to make this work.

Answer 1

So I have went through your code a little and came up with a solution to add a loading flag to state and use that to render a loading screen if we are waiting on any sort of update.
You could make this loading screen anything you wanted to show when waiting for updates.
Below is the code changes made all in App.js
// add isLoading flag to state
const [state, setState] = useState(
{
loggedIn: null,
sync: false,
initialized: null,
isLoading: true
}
)
Anytime setState is called, update the isLoading flag to true.
// line 55 in App.js
setState({
...state,
initialized: true,
isLoading: false
})
// line 75
setState({
...state,
initialized: true,
isLoading: false
})
// line 103
setState({
...state,
initialized: false,
isLoading: false
})
Then the return update.
{state.isLoading && <div>Loading...</div>}
<Route exact path="/" component={state.initialized ? Home : CreateAccountComp} />
With these changes the loading screen will show when we are waiting on any sort of update to initialized. Then the home screen will once it is updated to true or the create account page will show if it is updated to false.